注意:我会将overlay 与backdrop 互换使用。
我目前正在开发一种引导模式，我会突出显示元素以使它们从较暗的半透明背景中脱颖而出。
所以基本上，我有一个选择器用于我不想被覆盖的元素，然后我用半透明的深色 div 围绕它，模拟具有排除元素的覆盖。
我的解决方案适用于一个突出显示的元素，但当该数字变为 2+ 时，就很难计算如何在这些元素周围放置黑色 div。问题是:突出显示的需求会因页面而异 - 多个元素不会是静态的。
所以为了说明我的问题:
在这里你可以看到需要放入页面的不同框，以便用半透明的深色div包围Box2和Box2，基本上模拟高亮元素的叠加效果。对于这种情况，我可以硬编码计算，一切都会好起来的，但是如果 Box1 比 Box2 高怎么办？那么如果它们不再水平重叠呢？如果有一个 Box3 需要高亮怎么办？
无论哪种情况，我都不知道要放置多少个暗箱以及放置它们的位置。
在这种情况下，是否有任何数学公式可以帮助我？ jQuery 的使用也是可能的，因为它包含在我的元素中。
我将如何解决这个问题并使其可扩展(多个盒子，不同的位置)？
最佳答案
你想多了! 您正在寻找的东西可以通过特定的 HTML 和 CSS 布局来实现。
你必须使用类似这样的布局:
.container
.overlay
.box
.box
.box
.box
诀窍是使用全宽、半透明的叠加层，并将需要突出显示的元素放在前面。非常重要的是将 pointer-events: none 分配给叠加层，这样您就可以点击它了!
使 .box 有一个 z-index 值，比方说，1 和 .overlay 有一个z-index 值为 100。为了高亮某个.box，设置它的z-index为101。这样它就会突出显示。
我现在在移动设备上，但我在 Codepen 上做了一个基本的概念验证。单击框以突出显示它们，再次单击以撤消。适用于多个盒子!
关于Javascript math "draw"矩形围绕多个其他矩形实现背景效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42667539/