CSS3模糊过滤器的HTML body标签 [英] CSS3 blur filter on HTML body tag

问题描述

可以在正文标记上添加背景图片，然后添加 blur 过滤器，对于 body body中的 >？

Is it possible to have a background image on the Bodytag, and then add blur filter on it, whitout getting the blur effect on the div's thats inside the body ?

或者，需要将它添加到内部的第一个 div 因为我可以看到许多前。 on？

Or do U need to add it on the first div inside the body as I can see many ex. on ?

推荐答案

使用CSS过滤器，模糊的元素的所有子元素也会模糊。但是，不要为了使用模糊的bg图片而额外添加一个div，您可以使用伪元素。

Using CSS filters, all child elements of the element being blurred will also be blurred. However, rather than clutter your markup with an extra div just for the sake of a bg image with blur, you can use a pseudo element.

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

Don't forget to give it a z-index below the other content. In this case I just used -1, but you could use any number and give the other elements another number higher.

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;
}

在codepen上查看

这篇关于CSS3模糊过滤器的HTML body标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！