css - 通过灯箱

Question

我在页面上有一个灯箱，以确保用户无法点击任何地方。其次，我希望通过灯箱发出该页面的一些元素，这些元素是可编辑的。

目前我在这些元素上使用更高的z-index将它们放在灯箱的顶部。问题是，如果页面具有背景颜色，则它不会通过。我特别需要在应该照射的元素上设置背景颜色，因为它现在位于灯箱的顶部。由于可能有不同的页面，这不是解决方案。

在提供的示例中，popthrough元素具有白色背景，它实际上应该显示容器元素的蓝色背景。

如何在CSS中进行设置，以便元素实际通过灯箱发光，就像灯箱中有洞一样？

＆＃13;

＆＃13;

.container {
    display: table-cell;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
    background-color: lightblue;
}
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.6;
    z-index: 1;
}
.popthrough {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    z-index: 2;
    background-color: white;
}

＆＃13;

<div class="container">
    <div class="lightbox"></div>
    <div class="popthrough"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你想让pop through也通过它显示背景颜色，那么该元素应该设置不透明度，我认为。你也可以使用rgba颜色，其中a是不透明度。所以背景颜色：rgba（255,255,255,0.6）;将与背景颜色相同：白色;和不透明度：0.6;

Answer 2

我通过设置背景来实现这一点：继承popthrough。当容器不是父容器而是父容器时，或者进一步向上链接时，添加

.container * { background-color: inherit }

也可以，但这可能会有点激进，但可以很好地将实际的背景颜色一直传递到弹出窗口。

.container {
    display: table-cell;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
    background-color: lightblue;
}
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.6;
    z-index: 1;
}
.popthrough {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    z-index: 2;
    background-color: inherit;
}

<div class="container">
    <div class="lightbox"></div>
    <div class="popthrough"></div>
</div>