CSS如何给背景添加半透明滤镜_使用filter blur属性-css教程-PHP中文网

不能直接用filter blur给背景加半透明，因filter作用于整个元素；应使用backdrop-filter实现背景模糊+内容清晰，或用伪元素模拟，且半透明须用rgba()而非opacity。

css如何给背景添加半透明滤镜_使用filter blur属性

filter blur 不能直接给背景加半透明

很多人试过 filter: blur(5px) 想让背景变模糊再叠一层半透内容，结果发现整个元素（包括文字、子节点）全糊了——filter 作用于整个渲染盒，不是“背景层专用”。它不区分背景和前景，也没有 alpha 通道控制能力。真正要实现「背景模糊 + 内容清晰 + 半透明遮罩」，得靠分层：把背景单独拎出来，再用 backdrop-filter 或伪元素隔离。

用 backdrop-filter 实现真·背景毛玻璃效果

backdrop-filter 是唯一能只模糊「背后内容」的 CSS 属性，配合 background-color: rgba() 就能做出带透明度的毛玻璃。但它有硬性前提：元素必须是「视觉上透出背后内容」的，也就是自身要有透明区域或半透明背景。

必须设置 background-color 为 rgba(255,255,255,0.7) 这类带 alpha 的值，纯色或不透明背景会挡住背后内容，backdrop-filter 就失效
父容器不能有 overflow: hidden，否则裁剪掉背后区域，滤镜无内容可模糊
Chrome / Safari 支持良好，Firefox 默认关闭（需手动开启 layout.css.backdrop-filter.enabled）

示例：

.glass {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

兼容性差时用伪元素模拟模糊背景

当 backdrop-filter 不可用（比如老版 Edge 或需要支持 Firefox 稳定版），就得手动造一层「模糊的背景副本」：用 ::before 复制父容器背景，再对它应用 filter: blur()，同时确保内容层在它上面且不被模糊。

CSS工具箱(专业版)

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

下载

父容器需设 position: relative，伪元素设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
伪元素用 background-image 或继承父级背景，再加 filter: blur(8px)
内容层必须设 position: relative 且 z-index 高于伪元素，否则文字也会被盖住或模糊
注意：如果父背景是渐变或图片，伪元素里得显式写死，无法自动继承 background

别把 opacity 和 blur 混着用

有人给容器加 opacity: 0.8 再套 filter: blur()，以为能同时实现透明+模糊——这会导致整个容器（含文字）都变淡变糊，完全违背「背景模糊、文字清晰」的初衷。半透明必须来自 background-color: rgba() 或 background: hsla()，而不是作用于整块 DOM 的 opacity。