0Pricing
CSS Academy · 课时

使用 backdrop-filter 创建磨砂玻璃效果

使用 backdrop-filter 为叠加在其他内容上的元素创建磨砂玻璃模糊效果。

使用 backdrop-filter 创建磨砂玻璃效果 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 backdrop-filter

backdrop-filter 会将图形效果应用于元素背后的区域，而不是元素本身。元素必须具有一定的透明度（背景透明度小于 1，或没有背景），才能显示经过滤镜处理的背景。

磨砂玻璃效果

经典的磨砂玻璃样式：

<div class="bg-wrapper">
  <div class="glass-card">Frosted Glass Card</div>
</div>

-webkit-backdrop-filter 前缀

Safari 需要使用 -webkit-backdrop-filter 前缀。为了实现跨浏览器支持，请始终将它与标准属性一起使用。

可用的滤镜函数

backdrop-filter 支持与 filter 相同的函数：blur()、brightness()、contrast()、grayscale()、saturate()、hue-rotate()、sepia()、drop-shadow()。

<div class="bg-wrapper">
  <div class="modal-overlay"></div>
</div>

深色磨砂玻璃

适用于覆盖层和模态框的深色变体：

<div class="bg-wrapper">
  <div class="dark-glass">Dark Frosted Panel</div>
</div>

堆叠上下文要求

backdrop-filter 会创建堆叠上下文。元素必须合成在背景之上——也就是说，它需要处于堆叠顺序中其他内容的上方（不一定依靠 z-index，而是依靠绘制顺序）。

backdrop-filter 的性能

强度较高的 backdrop-filter: blur() 性能开销很大，因为它会强制浏览器单独渲染背景。为了保证移动设备上的性能，请将模糊值控制在 20px 或以下。避免对频繁重绘的内容使用它。

带磨砂覆盖层的模态框

带有磨砂玻璃覆盖层的模态对话框：

<div class="modal-backdrop">
  <div class="modal">Modal Content</div>
</div>

带玻璃效果的粘性导航

磨砂玻璃粘性导航栏：

<div class="bg-wrapper">
  <nav class="navbar">Sticky Nav</nav>
</div>

浏览器支持

Chrome 76 及更高版本、Firefox 103 及更高版本，以及 Safari 9 及更高版本（webkit）支持 backdrop-filter。请始终包含 -webkit- 前缀。请查看 caniuse.com 获取当前数据，并为不支持的浏览器提供不透明的后备方案。

不透明后备方案

请为不支持 backdrop-filter 的浏览器提供不透明背景作为后备方案：

<div class="bg-wrapper">
  <div class="glass">Fallback-aware glass panel</div>
</div>

快速检查

元素必须具有什么条件，才能显示 backdrop-filter 效果？

总结

backdrop-filter 会将滤镜效果应用于元素背后的内容。元素需要具有透明度，才能显示该效果。经典的磨砂玻璃效果使用 blur() + saturate()。为了支持 Safari，请始终包含 -webkit-backdrop-filter。请使用 @supports 提供不透明的后备方案。

常见问题解答

「使用 backdrop-filter 创建磨砂玻璃效果」课时是免费的吗？

是的 — 「使用 backdrop-filter 创建磨砂玻璃效果」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 backdrop-filter 创建磨砂玻璃效果」这节课中我会学到什么？

使用 backdrop-filter 为叠加在其他内容上的元素创建磨砂玻璃模糊效果。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 backdrop-filter 创建磨砂玻璃效果」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. filter：blur、brightness、contrast、grayscale
  2. 使用 backdrop-filter 创建磨砂玻璃效果
  3. 使用 mix-blend-mode 进行图层混合
  4. isolation 属性
← 返回 CSS Academy