如何模糊容器的背景？

Question

有没有办法模糊容器的背景，但不模糊里面的文本？

1. 你首先拥有全屏图像[已经由我完成;-)实际上我正在使用纯CSS解决方案：

   background-size: cover;
   

2. 比模糊 (1000px) 居中容器 ( ) 的背景margin: 0 auto，但不模糊容器中的内容。

3. 相同的容器 ( 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>

将所有文本放入类为“text”的 div 中，并将类“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%;
}