CSS伪类+filer实现背景图片毛玻璃效果

分类:css

前言

众所周知,CSS3 中新增了一个filter属性,其中filter:blur()属性可以给图像设置高斯模糊效果,也就是我们常说的 毛玻璃 效果。

但是该属性只能给某个 dom 元素设置,并且包括该 dom 内的所有子元素都会被设置成毛玻璃效果。有时我们只想给背景图添加毛玻璃效果,那么该如何实现呢?

解决办法

我们可以利用 CSS3 中的伪类元素来解决。

原理就是将背景放置在当前元素的伪类元素中,然后将伪类元素设置为毛玻璃效果,这样就不会影响该元素内的其他元素啦。

我们需要使用::before这个伪类元素。

其中,我们需要将元素设置属性position: relative;或者position: absolute;。然后将伪类元素设置为position: absolute;。这样就可以控制伪类元素的大小啦。

代码及效果演示:

如果想对html设置一个全屏背景呐,那么就需要将伪元素的 position 设置为 fixed

代码及效果演示: