什么是backdrop-filter
正如上文所说一样，这个属性是将元素后面的其他元素进行一个滤镜处理。事实上，毛玻璃只是backdrop-filter: blur()的一个用法，除了元素背景模糊，还有很多属性值可以用：
| 功能 | 使用示例 |
|---|---|
| 模糊图像 | backdrop-filter: blur(2px) |
| 让图像更明亮或更暗淡 | backdrop-filter: brightness(60%) |
| 增加或减少图像的对比度 | backdrop-filter: contrast(40%) |
| 在图像后方应用投影 | backdrop-filter: drop-shadow(4px 4px 10px blue) |
| 将图像转为灰度图 | backdrop-filter: grayscale(30%) |
| 改变图像的整体色调 | backdrop-filter: hue-rotate(120deg) |
| 反转图像颜色 | backdrop-filter: invert(70%) |
| 改变图像透明度 | backdrop-filter: opacity(20%) |
| 超饱和或去饱和输入的图像 | backdrop-filter: sepia(90%) |
| 将图像转为棕褐色 | backdrop-filter: saturate(80%) |
| 无 | 无 |
除此之外，这个属性还和transform属性一样，可以用空格将多个值连起来用：backdrop-filter: blur(4px) saturate(150%)
.glass {
backdrop-filter: blur(5px);
box-shadow: 0 8px 12px rgba(255,255,255,.3);
background: rgba(255,255,255,.5);
}原文链接：请输入链接描述
版权说明：实行[非商业性质]，部分文章来源网络各处，本站只做收集收藏，侵权请联系删除。