CSS backdrop-filter：给元素背景添加模糊与色调的高级滤镜

原创

已于 2025-08-19 14:14:01 修改 · 1.5k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-08-19 14:04:20 首次发布

在现代网页设计中，半透明元素搭配背景模糊效果已成为流行趋势 —— 从毛玻璃导航栏、模态框遮罩，到卡片悬停效果，这种设计能让界面更具层次感和高级感。实现这一效果的核心 CSS 属性，正是backdrop-filter。它能对元素背后的内容（而非元素自身）应用滤镜，轻松实现模糊、色调调整等效果，让界面瞬间提升质感。今天，我们就来解锁这个打造高级视觉效果的利器。

一、认识 backdrop-filter：只作用于 “背后内容” 的滤镜

backdrop-filter与我们熟悉的filter属性类似，都能应用模糊、色调等滤镜效果，但两者的作用对象截然不同：

filter：作用于元素自身及其所有子元素（对元素内部内容生效）。
backdrop-filter：仅作用于元素背后的内容（即元素下方的背景、其他元素等），元素自身内容不受影响。

1.1 直观对比：filter vs backdrop-filter

<div class="container">
  <div class="box filter">filter: blur(5px)</div>
  <div class="box backdrop-filter">backdrop-filter: blur(5px)</div>
</div>

.container {
   
   
  background: url("background.jpg") center/cover;
  padding: 4rem;
}

.box {
   
   
  width: 200px;
  height: 100px;
  margin: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
}

.filter {
   
   
  filter: blur(5px); /* 模糊元素自身及内容 */
}

.backdrop-filter {
   
   
  backdrop-filter: blur(5px); /* 模糊背后的背景图 */
}

在这里插入图片描述

filter效果：盒子内的文字和半透明背景都会被模糊，整体显得浑浊。
backdrop-filter效果：盒子内的文字清晰可见，背后的背景图被模糊，形成 “毛玻璃” 效果，层次分明。

这就是backdrop-filter的核心价值：在模糊背景的同时，保持元素自身内容的清晰，完美适配半透明 UI 组件。

1.2 基础语法：简单声明即可生效

backdrop-filter的语法与filter一致，支持多种滤镜函数，可单独使用或组合使用：

/* 单个滤镜 */
.element {
   
   
  backdrop-filter: blur(8px); /* 模糊效果 */
}

/* 多个滤镜（空格分隔） */
.element {
   
   
  backdrop-filter: blur(8px) brightness(0.8) contrast(1.2); /* 模糊+调亮+提高对比度 */
}

/* 不应用任何滤镜 */
.element {
   
   
  backdrop-filter: none;
}

要使backdrop-filter生效，元素通常需要满足两个条件：

元素自身有半透明背景（如background: rgba(255,255,255,0.3)），否则滤镜效果无法显现（背后内容被完全遮挡）。
元素背后有可被模糊的内容（如背景图、其他元素），否则效果无意义。

二、常用滤镜功能：打造多样化视觉效果

backdrop-filter支持与filter相同的滤镜函数，以下是在实际开发中最常用的几种：

2.1 blur (px)：背景模糊（最常用）

blur()是backdrop-filter最常用的函数，通过像素值控制模糊程度（值越大越模糊），用于实现 “毛玻璃” 效果：

.glass-effect {
   
   
  background: rgba(255, 255, 255, 0.2); /* 半透明白色 */
  backdrop-filter: blur(10px); /* 模糊背后内容 */
  border: 1px solid rgba(255

最低0.47元/天解锁文章