利用CSS创建模糊的实色背景

Question

我需要帮助使用css将光泽模糊效果应用于纯色背景：

<div class="container">
  <div class="overlay">
    Hello World!
  </div>
</div>

.container {
  background: blue;
  width: 100%;
  height: 300px;
}

.overlay {
  color: #FFF;
  padding: 20px;
}

JSFiddle: https://jsfiddle.net/znp73yr6/

- user1556571

---

你有检查过这个吗：http://codersblock.com/blog/creating-glow-effects-with-css/？ - hitesh_noty

你能给一个例子展示一下吗？我现在只能猜测了。 - Richard Hamilton

我猜你可以使用 filter: blur(5px); 来实现它。 - gevorg

说实话，我甚至不确定他的意思。但我尽力帮忙了。希望我做对了。 - Richard Hamilton

Answer 1

使用以下代码片段，其中使用 filter: blur(5px); 实现模糊效果。

.container {
    position: relative;
    width: 100%;
    height: 300px;
}

.blur {
    background: blue url(http://i.stack.imgur.com/fAcHL.jpg);
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}

.overlay {
    color: #FFF;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

<div class="container">
    <div class="blur"></div>
    <div class="overlay">
      Hello World!
    </div>
</div>

- gevorg

---

您可以看到所有的.overlay内容都被模糊处理了，而我希望它们能够清晰地显示在前面。;) - user1556571

@IhabAbdel-Rahim，我明白你的意思了，我修改了代码片段，现在只有背景被模糊了。 - gevorg

如果您不需要支持IE，那么这很棒：http://caniuse.com/#feat=css-filters - Jon P

@JonP 谢谢，我添加了一些针对浏览器的特定过滤选项，应该可以在Edge和IE11上工作，但不确定是否适用于旧版本。 - gevorg

Edge对filter有部分支持。IE的任何版本都不支持。 - Jon P

我相信 filter: blur 只适用于图像背景，而不适用于背景/文本/边框等颜色。这意味着 filter: blur 不能用于在其他对话框或主 UI 上方拥有亚克力对话框/上下文菜单。 - Dzintars

Answer 2

你可以指定 rgba 来给颜色设置透明度。这会使背景看起来模糊。

background: rgba(0,0,255, 0.5);

https://jsfiddle.net/znp73yr6/1/

- Richard Hamilton

---

然而，这并不会产生模糊效果，因为您半透明图层后面的物体不会变得模糊（透明度！=模糊）。 - Tjad Clark