如何使用CSS打造毛玻璃效果

html-css013

如何使用CSS打造毛玻璃效果,第1张

其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。

1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。

2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。

只是用到了css滤镜(filter)中的blur属性。

CSS中的毛玻璃特效主要使用了filter属性里的blur（）函数，也就是高斯模糊滤镜。

但是要做一个好的毛玻璃效果，需要注意很多细节。

如果仅仅是模糊的话你用一张图片模糊下不就搞定了，css都不用...

css也有blur的，在滤镜里面...

然后如果你毛玻璃想手指摸上去的地方变清晰的话，这个不是w3c重视不重视的问题了，属于css语言能力的问题，css本来就不是干这事的。