场景:我希望通过矩形蒙版覆盖元素(例如,背景#000,不透明度为0.8)。接下来,在我想要突出显示的覆盖区域中有一个区域。
以下是截图示例:
(正如你所注意到的那样,从暗色面具上切下了一个矩形。在Photoshop中,它很容易 - 只需在上面放一层并切出矩形)。
我怎样才能让它在CSS中运行?
旁注:这种技巧似乎很多用于教育用户使用新功能"。
答案 0 :(得分:7)
您可以使用边框或框阴影。并在伪元素上使用它们以最小化标记。
框阴影示例:
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 999px rgba(0,0,0,.8);
}
<div>
<p>Some content</p>
<p class="overlay">Other content</p>
<p>More content</p>
</div>
答案 1 :(得分:0)
目前只能在webkit中完成。使用属性-webkit-mask-box-image
。除此之外,我们只能使用css来实现这一点。
答案 2 :(得分:0)
您可以使用CSS 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;
}