如图
方法一:使用box-shadow
- 创建节点
<div ref='li_2'>
- 然后获取节点信息
mounted() {
const Dom = this.$refs.li_2[0]
this.BoundingClientRect = Dom.getBoundingClientRect()
},
- 页面添加蒙层
<div class="mask" :style="{top:BoundingClientRect.y+'px',left:BoundingClientRect.x+'px',width:BoundingClientRect.width+'px',height:BoundingClientRect.height+'px'}"></div>
- 最后写css
.mask{
position: fixed;
box-shadow: 0 0 0px 100vh rgba(0,0,0,0.5);
z-index: 99999;
&::before{
content: ' ';
display: block;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
}
方法二:使用border
- 创建节点
<div ref='li_2'>
- 然后获取节点信息
mounted() {
const Dom = this.$refs.li_2[0]
this.BoundingClientRect = Dom.getBoundingClientRect()
},
- 页面添加蒙层
<div class="mask" :style="{top:BoundingClientRect.y+'px',left:BoundingClientRect.x+'px',width:BoundingClientRect.width+'px',height:BoundingClientRect.height+'px'}"></div>
- 最后写css
.mask{
position: fixed;
border: 100vh solid rgba(0,0,0,0.5);
box-sizing: content-box;
z-index: 99999;
margin-left: -100vh;
margin-top: -100vh;
}
方法三:使用clip-path
- 创建节点
<div ref='li_2'>
- 然后获取节点信息
mounted() {
const Dom = this.$refs.li_2[0]
this.BoundingClientRect = Dom.getBoundingClientRect()
},
- 页面添加蒙层
<div class="mask" :style="{'--top':BoundingClientRect.y+'px','--left':BoundingClientRect.x+'px','--right':(BoundingClientRect.x+BoundingClientRect.width)+'px','--bottom':(BoundingClientRect.y+BoundingClientRect.height)+'px'}"></div>
- 最后写css
.mask{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 99999;
&::before{
content: ' ';
display: block;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
//从0 0 出发,画一圈矩形后,回到0 0,然后再到页面的四个角,就可以将页面挖出来了(So:这个方法可以挖不规则的图像)
clip-path: polygon(0 0,var(--left) var(--top),var(--right) var(--top),var(--right) var(--bottom),var(--left) var(--bottom),var(--left) var(--top),0 0,0 100%,100% 100%, 100% 0,0 0);
}
}