html - CSS滤镜:蒙砂玻璃效果不起作用，不模糊，内容受到影响

我想要一张前面有div的背景照片。
div应该具有模糊的深色背景和白色文字。

但是目前它正在做的是：没有模糊的深色背景和深色文字。
请帮我！

#section0 {
background-color: lightgreen; /*normally the photo*/
}

.blurwrapper {
position: relative;
overflow: hidden;
}

.blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
filter: blur(1px);
opacity: 0.2;
transform: scale(1.5);
z-index: 1;
}

h1 {
color: white;
}
.about {
color: white;
background: none;
margin: auto;
margin-top: 20px;
max-width: 800px;
font-size: 15px;
padding: 20px;
text-align: center;
letter-spacing: 2px;
color: white;
border-top: 1px solid white;
z-index: 2;
}

<div class="section active" id="section0">
    <div class="blurwrapper">
      <h1><span>...</span></h1>
      <p class="about">...</p>
      <div class="blur"></div>
    </div>
</div>

最佳答案

如您所见，模糊滤镜将应用于当前元素。
这意味着，如果要模糊图像，则需要将模糊应用于设置了#section0的background-image容器。如果您使用颜色而不是图像，则只会看到模糊的边框。

有关更多信息，请参阅文档。
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

使用您的代码给出更清晰的示例：http://codepen.io/ThePeach/full/egYbbe/

关于html - CSS滤镜:蒙砂玻璃效果不起作用，不模糊，内容受到影响，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41460211/