CSS背景图象迷离

Question

我有这个例子：http://jsfiddle.net/ruchan/8efhk9f5/

我想让块的背景（仅）模糊。 运用 filter: blur(5px);使整个内容模糊不清。

尝试在:before内使用它，但仍无效

我如何仅模糊背景，并使内容不模糊。

Answer 1

在draft version of the filters spec中有一个建议的CSS机制可以做到这一点，但它还没有在任何浏览器中实现（我知道）（编辑：现在在WebKit的nightlies中实现，据说在Mobile Safari iOS 9中）。对于这个答案的未来读者，这可能是一个可行的解决方案。

看起来像这样：

.thing {
  background-image: filter(url('myimage.png'), blur(10px));
}

因此，基本上它是一种功能表示法，允许您在加载图像时对图像应用过滤器。 同样，目前无论如何都不支持。

另一个答案中提到的example from CSS Tricks使用伪元素基本上使用相同的背景创建元素的副本，然后使用过滤器模糊它。这应该是一个现实的解决方案（至少对于支持CSS过滤器的浏览器 - 不要忘记-webkit-前缀以及未加前缀的版本！），否则你将不得不回到手动创建的模糊的图像。