为什么css毛玻璃效果属性无用

html-css023

为什么css毛玻璃效果属性无用,第1张

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

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

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

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

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

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

css的backdrop-filter简介:

https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

backdrop-filter可实现毛玻璃(磨砂)的效果,但可能兼容性不好,尤其安卓移动端,

大致效果如下:

绘制简单三角形

如下所示: