怎样用CSS伪元素::after实现毛玻璃背景模糊效果？-css教程-PHP中文网

毛玻璃效果需三层结构协同：底层为真实页面背景，中层为background: transparent的父容器，上层为应用backdrop-filter的::after伪元素；任一层不透明或结构错位都会导致模糊失效。

怎样用css伪元素::after实现毛玻璃背景模糊效果？

伪元素::after本身不能直接实现毛玻璃模糊

毛玻璃效果的核心是 backdrop-filter: blur()，而 ::after 伪元素默认无法对「其背后的页面内容」做背景模糊——它只是盖在父元素之上的一个新层，背后若无透出的真实内容（比如父元素设置了 background: transparent 且下层有可穿透的 DOM），backdrop-filter 就没东西可模糊。

必须让::after能“看到”下层真实内容才能生效

关键在于层级结构和透明穿透设计。常见错误是直接给 ::after 加 backdrop-filter 却忘了父容器是否遮挡了背景：

父元素不能有实色 background，否则 ::after 背后只有父元素颜色，不是页面真实背景
父元素需设 background: transparent，且自身不遮挡下方内容（比如 position 不影响文档流）
::after 必须设 content: ""、position: absolute、铺满父容器，并保持 z-index 高于父内容但低于上层交互元素
必须启用 backdrop-filter: blur(10px)，且注意 Safari 需加 -webkit-backdrop-filter

示例结构：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.glass {
  position: relative;
  background: transparent; /* 关键：不能写 #fff 或 rgba(255,255,255,0.8) */
}
.glass::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.15);
  z-index: -1; /* 确保在父元素内容之下，但父元素本身要透明才有效 */
}

blur值过大或父层遮挡会导致“假模糊”

实际调试中常遇到看似加了 backdrop-filter 却没效果，本质是视觉欺骗：

如果父元素有 background: rgba(0,0,0,0.2)，::after 模糊的只是这个半透黑底，不是网页背景——看起来像灰蒙蒙一片，不是毛玻璃
blur(20px) 在高分辨率屏上可能过强，文字边缘发虚；建议从 8px–14px 起步微调
Chrome 和 Edge 支持良好，但旧版 Safari（iOS 15.4 之前）不支持 backdrop-filter，需用 @supports 降级
开启 backdrop-filter 可能触发合成层，滚动时偶发闪烁，可在父元素加 will-change: transform 缓解