如何使用CSS3中的filter属性实现毛玻璃模糊效果-css教程-PHP中文网

不能只用 filter: blur() 实现毛玻璃效果，因其会模糊容器内所有内容；正确方案是用 backdrop-filter（需半透背景+同源背景）或伪元素+fixed背景图降级。

如何使用css3中的filter属性实现毛玻璃模糊效果

直接说结论：不能只用 filter: blur() 给内容容器加模糊来实现毛玻璃效果——那样连文字都会糊掉，而且背景不会被模糊。真正可用的方案是伪元素 + 同源背景 + backdrop-filter，或退而求其次用 filter 作用于伪元素背景图。

为什么直接给容器加 `filter: blur()` 会失败

这是新手最常踩的坑。写成这样：

.glass-card { background: rgba(255,255,255,0.7); filter: blur(10px); }

结果整个卡片里的文字、图标、边框全糊了，根本没法读。因为 filter 作用于**该元素自身及其所有子树渲染结果**，不是“透过它看后面的背景”。它不模糊背后的东西，只模糊自己画出来的东西。

常见错误现象包括：

文字边缘发虚、阅读困难
按钮点击区域失效（filter 不影响事件，但模糊后视觉误判）
在 Safari 或旧版 Chrome 中完全没效果（缺少前缀或版本不支持）

正确做法：用 `backdrop-filter` 处理背景（推荐）

backdrop-filter 才是为毛玻璃而生的属性——它只模糊元素**背后的画面**，不影响前景内容。但注意：它要求元素本身有透明/半透区域，且背后必须有可被模糊的内容（比如父容器有背景图或色块）。

典型结构：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.glass-card {
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari 必须加 */
}

关键点：

必须设置 background-color 为带 alpha 的值（如 rgba()），纯 transparent 在部分安卓 WebView 中可能失效
-webkit-backdrop-filter 不是可选，是 Safari 和部分 iOS Webview 的硬性要求
如果父容器没有背景（比如 body 是纯白），那模糊就无从谈起——backdrop-filter 模糊的是“背后”，不是“虚空”
在 Firefox 桌面版（v120+）已原生支持，但旧版需关闭 layout.css.backdrop-filter.enabled 标志才生效

兼容 fallback：伪元素 + `filter` + 固定背景

当目标环境不支持 backdrop-filter（如 Android 低版本 WebView、华为浏览器、微信内置 X5 内核），就得降级。核心思路是：用伪元素模拟“背后”，再对它应用 filter: blur()。

实操要点：

给父容器设 position: relative，并确保它有明确尺寸（否则伪元素无法撑满）
伪元素 ::before 要设置 background-image 与父容器一致，且加 background-attachment: fixed，避免滚动时背景错位
伪元素需扩大范围（如 margin: -20px），再配合 overflow: hidden 防止边缘模糊衰减
必须加多套前缀：-webkit-filter、-moz-filter、filter，仅靠 filter 在旧 Chrome/Firefox 中无效

示例片段：

.glass-fallback {
  position: relative;
  overflow: hidden;
}
.glass-fallback::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px; right: -20px; bottom: -20px;
  background: url(bg.jpg) center/cover fixed;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
  z-index: -1;
}