css 中，backdrop-filter: blur(10px) 作用

yqcoder2025-11-22 14:05

backdrop-filter: blur(10px) 是一个视觉效果属性，它的主要作用是对元素背后的内容（而非元素自身内容）应用模糊处理，创造出"毛玻璃"或"磨砂玻璃"效果。

具体特点：

只作用于元素背后的区域（如父元素背景、页面背景图、下方其他元素等）
blur(10px) 中的数值表示模糊程度，数值越大模糊效果越明显
通常需要配合半透明背景色（如 background: rgba(255,255,255,0.5)）使用，才能凸显模糊效果
元素自身的内容（文字、图片等）不会被模糊

css 复制代码

.nav {
  position: fixed;
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
  backdrop-filter: blur(10px); /* 背后内容模糊处理 */
}

这种效果常见于导航栏、弹窗、卡片等组件，既能让元素与背景产生层次感，又能隐约透出背后内容，增强视觉通透性，是现代 UI 设计中常用的高级效果。

浏览器兼容性：几乎所有现代浏览器（Chrome、Firefox、Safari、Edge 等）都已支持，但需注意部分低版本浏览器（如 IE）完全不支持该属性。