HTML 正文标签上的 CSS3 模糊过滤器

Question

是否可以在Body标签上放一个background image，然后在其上添加blur滤镜，却没有得到模糊效果在 body 内的 div 的 上？

或者你是否需要将它添加到 body 内的第一个 div 上，因为我可以看到很多例子。在？

Answer 1

使用 CSS 过滤器，被模糊的元素的所有子元素也将被模糊。但是，与其为了模糊的背景图像而使用额外的 div 使标记困惑，您可以使用伪元素。

不要忘记在其他内容下方给它一个 z-index。在这种情况下，我只使用了 -1，但您可以使用任何数字并为其他元素提供另一个更高的数字。

CSS

body:before {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-filter: blur(10px);
  background: url(http://hackingui.com/wp-content/uploads/2014/05/meng2-1980x1000.jpg) no-repeat;
  background-size: cover;
}

Check it out on codepen