不能直接用filter blur给背景加半透明，因filter作用于整个元素；应使用backdrop-filter实现背景模糊+内容清晰，或用伪元素模拟，且半透明须用rgba()而非opacity。
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()，同时确保内容层在它上面且不被模糊。
- 父容器需设
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。
立即学习“前端免费学习笔记（深入）”；
-
opacity会影响所有子元素，不可逆；rgba()只影响背景自身 - 用
opacity+blur后，文字边缘会出现意外的半透明锯齿，尤其在 Retina 屏上明显 - 如果真要降整体透明度，请改用
background: rgba() + backdrop-filter组合，而非opacity
最易忽略的一点：blur 值超过 10px 后，性能下降明显，尤其在滚动或动画中。iOS Safari 对大 blur 值渲染卡顿严重，建议控制在 2–8px 范围内，必要时用媒体查询降级为纯色背景。
