除了一个固定的区域，整个屏幕变暗
我想创build一个教程，将导致用户到哪里点击。 我试图用一个<div>覆盖整个屏幕，除了一个固定width ， height ， top和left的特定区域以外，这个<div>会使所有元素变暗。
问题是，我无法find一种方法来“取消”父母的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>
以下是我想要实现的模型图像：
你可以用一个div来做，并给它一个box-shadow 。
编辑：正如@尼克Shvelidze指出，你应该考虑添加pointer-events: none
像@Prinzhornbuild议的那样增加了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>
你可以创build一个SVG，里面有一个你需要的洞。 但是我猜想你需要find一种方法来处理点击，因为它们都将被定位到叠加的svg。 我的事情document.getElementFromPoint可以帮助你在这里。 MDN
这也可以类似于@ 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>
你可以使用CSS outline属性来实现VilleKoo的答案 。 它有很好的浏览器支持（并且在IE8 +中也可以使用）。 轮廓与边界具有相同的语法，但与边框不同，它们不占用空间，它们被绘制在内容之上。
同样对于IE9 +，你可以用calc(100 * (1vh + 1vw - 1vmin)) 。
这种方法的缺点是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>
这里是使用@VilleKoo css简单的jQuery代码
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>
#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; }
