如何模糊容器的背景？

Question

如何模糊容器的背景？

jquerycsseffectsblursvg-filters

5

有没有一种方法可以模糊一个容器的背景，但不模糊其中的文本？

You have your fullscreen image first [already done by me ;-) Actually I'm using a pure css solution:
```
background-size: cover;
```
Than blurring the background of the (1000px) centered container (margin: 0 auto), but not the content in the container.
The same container (margin: 0 auto; width: 1000px; ) (of course without the blur), where you can add html stuff (...text).

我希望有人能够帮助我。

- Maximilian Fuchs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anshu Dwibhashi · Accepted Answer

将真实图像的尺寸缩小，在HTML代码中设置较大的宽度和高度。

例如，将真实图像的宽度和高度设为50像素。在HTML代码中将宽度和高度设置为150像素左右。

这样会导致图片被拉伸，从而产生模糊效果。

好吧，这是一种很合理的方法。

如果你想使用CSS（CSS3），可以这样做:

filter: blur(5px) brightness(0.5);

只需将值设置为您想要的即可。

参考资料：http://www.inserthtml.com/2012/06/css-filters/

希望这能帮到您...

编辑1：

<div class="container">
    <div class="background"></div>
    <div class="text"></div>
</div>

将你所有的文本放到class为"text"的div中，保留class为"background"的div为空。

同时应用以下样式：

.background  {
    background: #CCC;
    filter: blur(5px) brightness(0.5);
    position: absolute;
    top: 0; left: 0;
    height: 100%; width:100%;
}
.text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}