应使用background-color: rgba()而非opacity实现半透明背景，因opacity会继承导致文字发虚、交互异常，而rgba()仅作用于背景色，可确保内容清晰可读且交互正常。
opacity 会连文字一起变透明，别直接用它做背景
很多人一想“透明背景”，第一反应是 opacity: 0.8。但这个属性作用于整个元素及其所有子节点，包括文字、图标、子容器——结果就是文字也发虚，可读性崩盘。它适合做整块遮罩或淡入动画，不适合做“背景透明而内容清晰”的 UI 面板。
真正需要的是：背景层透明，内容层不透明。这必须靠分层实现。
用 rgba() 或 hsla() 设置 background-color 最稳妥
给容器设置带 alpha 通道的背景色，是最兼容、最可控的方式。现代浏览器（Chrome 1+、Firefox 3+、Safari 3.1+、Edge 12+）全部原生支持 rgba()，无需前缀。
-
background-color: rgba(255, 255, 255, 0.1)—— 白色 10% 不透明（即 90% 透明），适合浅色背景上的毛玻璃效果 -
background-color: rgba(0, 0, 0, 0.4)—— 黑色 40% 不透明，常用于模态框遮罩或深色文字蒙版 - 避免用
opacity覆盖它；如果同时写了opacity，会叠加导致意外过透
backdrop-filter 搭配 rgba() 才算完整毛玻璃
单靠 rgba() 只是半透明色块，没有模糊感。要模拟 macOS 或 iOS 风格的毛玻璃，必须加 backdrop-filter: blur()。但注意：它本身不提供颜色，必须和 background-color: rgba() 配合使用，否则在纯白/纯黑背景下会失效或反差过大。
实操要点：
- 始终写双前缀：
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); - blur 值建议 8–20px：太小没质感，太大耗性能且糊掉背景文字
- 搭配
saturate(1.2)或brightness(1.05)可增强玻璃通透感，但非必需 - Firefox 103+ 支持，旧版 Firefox 和 IE 完全不支持——需用
@supports降级
IE 和老 Android 必须有 fallback 方案
如果你的项目还需支持 IE11 或 Android 4.x，rgba() 虽然可用，但 backdrop-filter 和部分渐变语法会彻底失效。这时候得靠 CSS 特性检测 + 渐进增强：
示例降级写法：
.glass-panel {
/* 默认 fallback：纯色半透明 */
background-color: rgba(255, 255, 255, 0.15);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-panel {
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
}
}
关键点在于：fallback 的 rgba() 值要略浓一点（比如 0.15 vs 0.1），否则在不支持新特性的设备上会显得过透、发虚。
最易被忽略的是层级控制——伪元素蒙版、多背景、z-index 顺序一旦错位，透明就变成“看不见”；还有字体抗锯齿在低 opacity 下的渲染劣化，这些都得在真机上反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
