jquery - 如何模糊容器的背景？

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>

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