在现代 Web 设计中,毛玻璃效果越来越受欢迎。它能够让界面元素看起来更加柔和、朦胧,同时又不会完全遮挡背景内容,给人一种透明而又不失质感的视觉体验。虽然过去实现这种效果需要借助图像编辑软件,但现在只需要几行 CSS 代码,就可以在网页上呈现出令人惊艳的毛玻璃效果。
使用 backdrop-filter 属性
实现毛玻璃效果最简单的方式就是使用 CSS 的 backdrop-filter 属性。这个属性可以对元素背后的区域应用各种滤镜效果,如模糊、饱和度调节等。下面是一个基本示例:
.blur-element {
background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
backdrop-filter: blur(10px); /* 背景模糊 */
-webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
}
在上面的代码中,我们首先为元素设置了一个半透明的背景色,然后使用 backdrop-filter 属性对背景进行了 10 像素的模糊效果。同时,我们还添加了 -webkit-backdrop-filter 来兼容老版本的 Safari 浏览器。
完整示例
下面是一个更完整的示例,展示了如何将毛玻璃效果应用于一个卡片组件: