如何模糊容器的背景？ [复制]

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