HTML body标签上的CSS3模糊过滤器

Question

是否可以在background image代码上添加Body，然后在其上添加blur过滤器，以及在div's内的body上获取模糊效果div？

或者你需要在body内的第一个{{1}}添加它，因为我可以看到很多前任。在？

Answer 1

使用CSS过滤器，模糊元素的所有子元素也将模糊。但是，为了使bg图像具有模糊效果，不要使用额外的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