除固定区域外，是否调暗整个屏幕？
除固定区域外，是否调暗整个屏幕？
提问于 2017-07-17 20:07:37
我想创建一个教程，将引导用户准确地点击。我试图用一个<div>覆盖整个屏幕，它将使所有元素变暗，但特定区域除外，它位于固定的width、height、top和left中。
问题是，我找不到一种方法来“取消”父母的background-color (这也是透明的)。
在下面的片段中，hole是应该没有任何background-color的div，包括它的父div。
这到底能做到吗？有什么想法吗？
#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}<div id="bg">
<div id="hole"></div>
</div>
这是我正在尝试实现的一个模型图像：
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-07-17 20:15:28
你可以只用一个div，然后给它一个box-shadow。
编辑：正如@Nick Shvelidze指出的那样，你应该考虑添加pointer-events: none
根据@Prinzhorn的建议，为box-shadow添加了vmax值
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* for IE */
box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
/* for real browsers */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
pointer-events: none;
}<div></div>
Stack Overflow用户
发布于 2017-07-17 20:12:55
您可以创建一个SVG，该SVG由一条路径填充，该路径在您需要的位置具有孔。但我猜你需要找到一种方法来处理点击，因为所有的点击都将针对覆盖的svg。我想document.getElementFromPoint可以在这方面帮到你。mdn
Stack Overflow用户
发布于 2017-07-20 15:27:55
这也可以与@VilleKoo的答案类似，但有一个边框。
div {
border-style: solid;
border-color: rgba(0,0,0,.3);
pointer-events: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border-width: 40px 300px 50px 60px;
}<div></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45143916
复制相关文章
相似问题