不能用opacity设置背景透明，因为它会作用于整个元素及所有子元素，导致文字、边框、图标等同步变淡甚至叠加衰减；应使用background-color: rgba()仅控制背景色透明度，保持内容清晰可读。
直接用 background-color: rgba()，别碰 opacity —— 后者会让文字、边框、子元素全变灰，不是你想要的“背景透明”。
为什么不能用 opacity 设置背景透明？
因为 opacity 作用于整个元素及其所有后代，包括文字、图标、按钮、伪元素等。哪怕只设 opacity: 0.8，文字也会同步变淡，可读性立刻下降；如果父容器嵌套多层，透明度还会叠加衰减（比如两个 opacity: 0.5 套着，子文字实际只剩 0.25 不透明度）。
常见错误写法：
div {
background-color: #fff;
opacity: 0.7; /* ❌ 文字也发虚 */
}-
opacity是元素级开关，不是背景专用属性 - 它不区分“背景”和“内容”，浏览器压根不管你在想什么
- 在需要 hover 动画或响应式切换时，
opacity会把交互反馈一起模糊掉
rgba() 和 hsla() 怎么选？
两者都支持 alpha 通道（第四个参数），语义清晰、兼容性好（IE9+）、无副作用。区别在于颜色模型：
立即学习“前端免费学习笔记（深入）”；
-
rgba(255, 255, 255, 0.85)：适合从已有 RGB 值快速调整，比如把#ffffff改成半透白 -
hsla(210, 100%, 50%, 0.7)：适合设计系统中统一管理色相/饱和度，alpha 独立调节更直观 - 避免用
transparent单独写——它等价于rgba(0,0,0,0)，无法控制“半透程度”
示例（导航栏背景）：
header {
background-color: rgba(255, 255, 255, 0.92); /* ✅ 白底带通透感，文字依然锐利 */
}遇到背景图 + 透明色，怎么安全叠加？
如果你的背景是图片（background-image），又想加一层半透遮罩，rgba() 本身不适用——它只能设纯色背景。此时有两个稳妥方案：
- 用伪元素
::before承载遮罩层：position: absolute+background-color: rgba(0,0,0,0.3)，再通过z-index控制层级 - 在图片上叠一层同尺寸
div，设background-color: rgba()并position: absolute定位 - 禁用
background-blend-mode做融合——它在部分安卓 WebView 和旧版 Safari 中表现不稳定
关键点：遮罩层必须和背景图尺寸、位置完全一致，否则会出现错位漏白。
input、footer、iframe 这些特殊元素要注意什么？
它们对透明处理更敏感，容易踩隐性坑：
-
input：直接设background-color: transparent即可，不要用opacity；但必须显式定义color和::placeholder色，否则暗黑模式下文字可能消失 -
footer：若用position: fixed或sticky，rgba()背景需配合足够z-index，否则会被上方滚动内容遮住 -
iframe：父页设了rgba()背景，iframe 内容默认不继承；如需透出，iframe 页面自身要设body { background: transparent }
最常被忽略的是：所有用 rgba() 的地方，alpha 值别硬写死。0.85 是安全起点，但深色背景下可能需要降到 0.7，浅色图上遮罩则可能得升到 0.9 —— 得靠真实设备肉眼调，而不是凭感觉写个 0.5 就完事。
