1

有没有办法在 CSS 中伪造与背景图像类似的前景图像？它不会存在于 div 中的其他元素之后，而是会隐藏元素内的所有内容。

4

4 回答 4

6

使用伪元素（::before在IE≤7中不起作用）：

.obscured{     
    position: relative;
}
.obscured::before{
    position: absolute; /* maximize the pseudo-element */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.3); /* use background-image here */
    content: " "; /* it needs actual content, an empty space is enough */
}

也可以看看：

于 2012-06-15T22:08:25.497 回答
0

途中是使用绝对定位，来覆盖所有的标签。我想你想用一个事件来触发它。所以当事件触发时，可以浮动除前景之外的所有元素

于 2012-06-15T22:07:41.490 回答
0

您可以使用绝对定位覆盖相同大小的子元素并为其添加背景图像。

带有 bg 颜色而不是图像的jsfiddle 示例。在 FF、Chrome、IE9 中测试。

于 2012-06-15T22:20:38.743 回答
0

您可以使用一行 css > backdrop-filter: blur(1rem);：

<div class="some-background">
  <div style="backdrop-filter: blur(1rem);"></div>
</div>
于 2021-04-20T04:26:29.330 回答