最干净的解法是用 rgba() 设置背景色而非 opacity，因 rgba() 仅影响颜色透明度，不改变文字及子元素；需注意层叠顺序、降级写法、避免 background 简写覆盖、滚动叠色问题及兼容性。
用 rgba() 设置背景色而不是 opacity
直接改背景，不碰文字透明度——这是最干净的解法。opacity 会把整个元素（包括子元素）一起变透明，而 rgba() 只作用于颜色本身，文字、边框、子元素完全不受影响。
常见错误是写成 background-color: rgba(0,0,0,0.5); 却忘了把原来的 background-color: #000; 或 background-color: black; 彻底删掉，导致样式被覆盖或冲突。CSS 层叠顺序里，后声明的同名属性才会生效。
-
rgba(r, g, b, a)的第四个参数a是透明度，范围是0（全透）到1（不透），不是百分比 - 别用
hsla()替代，除非你本来就在用 HSL 色系；混用容易调错色相 - 如果背景是图片+色块叠加，只对色块部分用
rgba()，图片本身保持原样
IE8 及更老浏览器不支持 rgba() 怎么办
IE8 及以下不识别 rgba()，会直接忽略该声明，退回到上一条有效的 background-color 声明——所以得手动提供降级色值。
典型写法是先写一个纯色兜底，再写 rgba() 覆盖：
div {
background-color: #000; /* IE8 及以下看到这个 */
background-color: rgba(0, 0, 0, 0.5); /* 支持的浏览器用这个 */
}
注意：不能反过来写，否则老浏览器会把整条规则丢弃。
- 别依赖
filter: progid:DXImageTransform.Microsoft.gradient模拟，它在 IE8 下行为不稳定，且和rgba()不等价 - 如果项目已放弃 IE8，就不用写降级——但得确认团队构建工具或 CSS 前置处理器没自动加兼容代码
- 用
Can I use查rgba兼容性时，注意看 “CSS Colors Level 3” 栏，不是 “CSS3” 笼统条目
用 background 简写时 rgba() 容易被意外覆盖
很多人喜欢用 background: #000 url(img.png) no-repeat center; 这类简写，但只要里面含了颜色值，就会把之前单独写的 background-color: rgba(...) 整条干掉。
原因：CSS 中 background 是复合属性，只要它出现，就会重置所有子属性（background-color、background-image 等）为初始值，除非你在简写里明确写出 rgba()。
- 正确写法：
background: rgba(0,0,0,0.5) url(img.png) no-repeat center; - 错误写法：先写
background-color: rgba(0,0,0,0.5);，后面又写background: #000 url(...);—— 后者会让前者失效 - 如果背景要渐变+透明色叠加，优先用
background: linear-gradient(...), rgba(...);多层语法，别拆开写
半透背景遇上滚动内容时的视觉陷阱
当容器有滚动条、内部内容超出可视区，而背景用了 rgba()，用户滚动时可能发现文字在某些区域“变淡”或“发虚”——这通常不是透明度问题，而是背景色与滚动内容下方其他元素发生了意外叠色。
比如父容器没设 background-color，滚动时露出的是更外层的白色背景，rgba(0,0,0,0.5) 叠在白底上实际呈现灰黑，而叠在深色区域就更暗，造成不一致观感。
- 解决方法：确保滚动容器的父级有明确背景色（哪怕只是
#fff），切断穿透链 - 不要指望
backdrop-filter来补救——它和rgba()解决的是不同问题，且兼容性更差 - 移动端 Safari 对
rgba()背景+滚动的合成性能较敏感，如果卡顿，可尝试加transform: translateZ(0);强制 GPU 加速（仅限必要时）
事情说清了就结束。真正麻烦的从来不是怎么写 rgba()，而是谁在哪个层级悄悄覆盖了它，以及滚动、嵌套、缩放这些场景下，人眼看到的“透明”到底是谁跟谁叠出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
