用 rgba() 设置背景色可实现背景半透明而文字完全不透明，因其仅作用于背景色，不影子元素；opacity 则会使整个元素及子元素（含文字）一同变透明，降低可读性。
用 rgba() 设置背景色，就能让背景半透明，同时文字保持完全不透明——这是最直接、最稳妥的解法。
为什么不用 opacity？
opacity 会作用于整个元素及其所有子元素（包括文字、图标、子容器），没法单独控制背景。哪怕只想要背景淡一点，文字也会跟着变淡、发虚，可读性大打折扣。
用 rgba() 给背景上色
把原本的十六进制或英文颜色，换成 rgba(红, 绿, 蓝, 透明度)，其中透明度是 0～1 的小数：
-
background-color: rgba(0, 0, 0, 0.7);→ 深灰背景，70% 不透明（即 30% 透明） -
background-color: rgba(255, 255, 255, 0.9);→ 白色背景，90% 不透明（轻微透出下层） - 想微调透明感？只改最后一个数字就行，比如
0.85、0.6，比反复试 opacity 更精准
兼容性放心，现代项目基本无压力
rgba 自 IE9+ 就已支持，所有主流浏览器（Chrome/Firefox/Safari/Edge）都完全兼容。如果项目不需支持 IE8 及更早版本，可以放心使用。
立即学习“前端免费学习笔记（深入）”；
额外提示：渐变或图片背景也能半透明
如果是 background-image 或线性渐变，同样可用 rgba 颜色值 来定义渐变色 stops：
background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,0,255,0.5));- 图片背景本身不透明，如需叠加半透效果，可在它上面加一层
::before伪元素，用 rgba 背景色 +z-index控制层级
基本上就这些 —— 记住：要背景透、文字实，就绕开 opacity，直奔 rgba()。
