background-color: rgba()是唯一能让背景半透而文字和子元素完全不受影响的原生方案；其alpha参数仅作用于颜色本身，必须为0–1小数，不可用百分比或整数，且需避免被background简写覆盖。
直接用 background-color: rgba() 就行
这是唯一能只让背景变半透、文字和子元素完全不受影响的原生方案。rgba() 的第四个参数 alpha 仅作用于颜色本身，不波及盒模型里的任何内容。别碰 opacity——它一加，整个元素连同文字、图标、边框全跟着发虚，加 opacity: 1 也救不回来。
rgba() 参数必须写小数，不能写百分比或整数
常见错误是写成 rgba(0, 0, 0, 50%) 或 rgba(0, 0, 0, 50)，浏览器会直接忽略整条声明。正确写法只有：rgba(0, 0, 0, 0.4) 表示黑色背景、40% 不透明（即 60% 透明）；0.0 是全透，1.0 是实色。
小心 background 简写覆盖 rgba()
很多人先写 background-color: rgba(0, 0, 0, 0.5)，后面又跟一句 background: #000 url(bg.png)，结果前者被清空——因为 background 是复合属性，会重置所有子项。正确做法是：
- 把
rgba()当作颜色值塞进简写里：background: rgba(0, 0, 0, 0.5) url(bg.png) no-repeat center; - 如果用渐变叠加，也要把
rgba()放在background值最前面：background: rgba(0, 0, 0, 0.3), linear-gradient(to right, #f00, #00f); - DevTools 里看到
background-color被划掉，基本就是被后面的background覆盖了
IE8 及更早版本不支持，但降级很干净
IE8 完全不解析 rgba()，但它不会报错，也不会阻断后续样式。只要按顺序写：
立即学习“前端免费学习笔记（深入）”；
-
background-color: #000;（IE8 看到就停） -
background-color: rgba(0, 0, 0, 0.5);（现代浏览器覆盖）
反过来写（rgba 在前、纯色在后）不行，IE8 会整条规则丢弃。如果项目已明确放弃 IE8，就不用兜底——但得确认构建流程没被 autoprefixer 或旧版 postcss 自动注入兼容代码。
真正容易被忽略的是：背景图上想实现“图片变暗 + 文字清晰”，rgba() 无效，必须用伪元素分层。这时候不是调错参数，而是模型错了——rgba() 只管颜色，不管图像。
