Question

有没有办法假装前景图像与CSS中的背景图像相似？它不会存在于div中的其他元素后面，而是会掩盖元素中的所有内容。

Answer 1

使用pseudo-element（::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 */
}

另见：

Answer 2

在途中是使用绝对定位，以涵盖所有标签。我认为你想通过一个事件触发它。因此，当触发事件时，您可以浮动除前景

之外的所有元素

Answer 3

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

jsfiddle example使用bg颜色而不是图像。经过FF，Chrome，IE9测试。

Answer 4

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

<div class="some-background">
  <div style="backdrop-filter: blur(1rem);"></div>
</div>

用CSS中的图像模糊div

4 个答案: