backdrop-filter 与 filter 的区别

filter:模糊内容
backdrop-filter:透过该层的底部元素模糊化
这两个属性的语法是一样的

写法

backdrop-filter: saturate(150%) contrast(50%) blur(8px);
background-color: rgba(0, 0, 0, 0.3);

saturate(150%)意为使…饱和,类似 ps 饱和度效果,小于 100%变暗,大于 100%变亮
contrast(50%)意为对比,类似 ps 对比度,100%为原图,0%为全灰色图像

使用效果

亮色背景

暗色背景