Question

有没有办法模糊容器的背景，而不是里面的文字？

screenshot http://imageshack.us/a/img443/4976/j7qj.jpg

您首先拥有全屏图像[已由我完成;-)实际上我正在使用纯css解决方案：
```
background-size: cover;
```
模糊（1000px）居中容器（margin: 0 auto）的背景，而不是容器中的内容。
同一个容器（margin: 0 auto; width: 1000px;）（当然没有模糊），您可以在其中添加html内容（...文本）。

我希望有人能帮助我。

Answer 1

缩小实际图像的大小，并在HTML代码中为宽度和高度添加大尺寸。

例如，实际图像的宽度和高度各为50像素。在HTML代码中设置宽度和高度，例如：150px。

现在这将导致图像被拉伸，因此会产生模糊效果。

嗯，这是一种合乎逻辑的方法。

如果你想使用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>

将所有文本放在div为“text”的div中，并将div为“background”的类留空..

还应用以下样式：

.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%;
}

如何模糊容器的背景？

1 个答案: