除了固定区域以外，整个屏幕都变暗了吗？

我想创建一个教程，它将引导用户到哪里点击。我试图用<div>覆盖整个屏幕，其将调暗除了特定区域之外的所有元素，其在固定的width,height,top和left中。除了固定区域以外，整个屏幕都变暗了吗？

问题是，我无法找到一种方法来“取消”父母的background-color（这也是透明的）。

在下面的截图中，hole是应该没有任何background-color的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>

这里是我想要实现样机图片：

来源

2017-07-17 Koby Douek

+12

如果要创建功能导览/教程，你可能有兴趣在这样做的JS库之一。他们有一些漂亮的功能，并将节省您编写一堆一次性CSS效果的麻烦。请查看http://introjs.com/或http://linkedin.github.io/hopscotch/。 – octern

这只是一个建议的lib：http://heelhook.github.io/chardin.js/ –

120

你可以做到只有一个div并给它一个box-shadow。

编辑： 为@Nick Shvelidze指出的那样，你应该考虑增加pointer-events: none

为box-shadow新增vmax值@Prinzhorn建议

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>

来源

2017-07-17 12:15:28 VilleKoo

+27

如果你想让它下面的区域可点击，一定要添加'pointer-events：none'。 –

1,000px对我来说似乎不够 - 看起来会有太多的情况下，这不会填满屏幕，否则真的很聪明的解决方案。 –

@EdmundReed你可以根据自己的需要调整:) – VilleKoo

您可以创建一个充满具有孔的路径的SVG你需要它的地方。但我猜测你需要找到处理点击的方法，因为它们都将针对重叠的svg。我的东西document.getElementFromPoint可以帮助你在这里。 mdn

来源

2017-07-17 12:12:54 philipp

我认为谷歌反馈形式使用svg昏暗的休息区。 – Durga

这也可以与@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>

来源

2017-07-20 07:27:54 Dan

下面是使用CSS @VilleKoo

var Dimmer = (function(){ 
 
    var el = $(".dimmer"); 
 
    
 
    return { 
 
    showAt: function(x, y) { 
 
     el 
 
     .css({ 
 
      left: x, 
 
      top: y, 
 
     }) 
 
     .removeClass("hidden"); 
 
    }, 
 
    
 
    hide: function() { 
 
     el.addClass("hidden"); 
 
    } 
 
    } 
 
}()); 
 

 

 
$(".btn-hide").click(function(){ Dimmer.hide(); }); 
 
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });

.dimmer { 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 200px; 
 
    top: 50px; 
 
    left: 50px; 
 
    box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */ 
 
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */ 
 
    pointer-events: none; 
 
} 
 

 
.hidden { display: none; }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    <div> 
 
    <input type="text"> 
 
    <select name="" id=""></select> 
 
    <input type="checkbox"> 
 
    </div> 
 
    <div> 
 
    <input type="text"> 
 
    <select name="" id=""></select> 
 
    <input type="checkbox"> 
 
    </div> 
 
    <div> 
 
    <input type="text"> 
 
    <select name="" id=""></select> 
 
    <input type="checkbox"> 
 
    </div> 
 
    <div> 
 
    <input type="submit" disabled> 
 
    </div> 
 
    
 
    <input type="button" value="Hide" class="btn-hide"> 
 
    <input type="button" value="Show" class="btn-show"> 
 
    <div class="dimmer hidden"></div> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
</body> 
 
</html>

来源

2017-07-20 12:03:10 Buksy

#bg { 
    background-color: gray; 
    opacity: 0.6; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 99998; 
} 
#hole { 
    position: fixed; 
    top: 100px; 
    left: 100px; 
    width: 100px; 
    height: 100px; 
    z-index: 99999; 
}

来源

2017-07-20 18:06:29

简单的jQuery代码就可以实现相同VilleKoo's answer使用CS S outline财产。它具有出色的浏览器支持（并且也可以在IE8 +中使用）。轮廓与边界具有相同的语法，但与边框不同，它们不占用空间，它们被绘制在内容之上。

也适用于IE9 +，您可以用calc(100 * (1vh + 1vw - 1vmin))替换99999px。

该方法的缺点是outline不受border-radius的影响。

演示：

div { 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 200px; 
 
    top: 50px; 
 
    left: 50px; 
 
    /* IE8 */ 
 
    outline: 99999px solid rgba(0,0,0,.3); 
 
    /* IE9+ */ 
 
    outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3); 
 
    /* for other browsers */ 
 
    outline: 100vmax solid rgba(0,0,0,.3); 
 
    pointer-events: none; 
 
}

<div></div>

来源

2017-07-24 04:35:07

除了固定区域以外，整个屏幕都变暗了吗？

回答

相关问题