您可以使用边框或阴影来实现此效果。并且可以在伪元素上使用它们来最小化标记。
使用 box-shadows 的示例:
div{
height:100%;
position:relative;
}
.overlay{
display:inline-block;
position:relative;
z-index: 1;
}
.overlay:after{
content:'';
position:absolute;
top:0; left:0;
width:100%; height:100%;
box-shadow: 0px 0px 0px 9999px rgba(0,0,0,.85);
}
<div>
<p>Some content</p>
<p class="overlay">Other content</p>
<p>More content</p>
</div>
z-index
属性来使高亮元素显示在遮罩层之上,如下所示:.overlay{
display:none;
position:absolute;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
top:0;
left:0;
z-index:999;
}
.highlight{
position:relative;
z-index:9999;
}
目前只能在 Webkit 中完成此操作,使用属性 -webkit-mask-box-image
。除此之外,我们无法仅使用 CSS 实现此操作。