filter和backdrop-filter都可以支持毛玻璃效果,但是两者之间区别比较大。
filter一般针对图片有效果,如果你想对图片上的某个文字的背景做毛玻璃,一般需要给文字一个图片背景,不然效果很差。
而backdrop-filter可以直接对于元素起到毛玻璃的效果,相对更简单方便。
但是backdrop-filter有一个不可协调的bug,就是如果在一个页面中大量使用backdrop-filter之后页面出现渲染滑动卡顿的大问题
之前在百度上找了个添加 transform: translateZ(0);的方法,试过并没有多大用,后来又试试添加绝对定位position:absolute,怎么说,有效果但不大。
所以如果页面需要大量使用的毛玻璃效果的话,还是建议filter吧,麻烦是麻烦一点,但是性能会好一点。
如果有人知道怎么改善backdrop-filter的性能问题,请不吝指教,多谢。