要实现背景透明而文字不透明，必须使用rgba()或hsla()设置background-color，不可用opacity；文字颜色需为纯色以保障对比度和可读性，且background-color与color须分开声明。
背景透明但文字不透明，必须用 rgba() 或 hsla() 而非 opacity
直接给元素设 opacity: 0.7 会让整个元素（包括子元素、文字）都变透明，这不是你想要的。要实现“背景半透、文字实色”，只能对背景色本身做透明处理，即用支持 alpha 通道的颜色函数。
-
rgba(255, 255, 255, 0.7)：红绿蓝值 + 透明度（0–1），兼容性好（IE9+） -
hsla(200, 50%, 60%, 0.7)：色相/饱和度/亮度 + 透明度，更适合设计师调色逻辑 - 不能写成
background: #fff; background-opacity: 0.7—— CSS 没这属性
文字颜色别误用透明背景色去“覆盖”
有人试过把文字也设成 rgba() 来“抵消”背景透明感，比如背景用 rgba(0,0,0,0.1)，文字用 rgba(0,0,0,0.9)，结果发现文字发灰、对比度不足。这不是 bug，是叠加计算的结果。
- 文字应始终用不带透明度的纯色（如
#333、hsl(0,0%,20%)），靠足够高的明度差保障可读性 - 如果背景是深色半透，文字就用浅色纯色；反之亦然
- 可用 WebAIM 对比度检查器 验证是否满足 WCAG AA 标准
background-color 和 color 必须分开声明
CSS 不允许在一个声明里混用背景与文字的透明逻辑。下面这些写法都是错的：
/* ❌ 错误：opacity 影响全部子元素 */
.container {
opacity: 0.8;
color: #000;
}
/ ❌ 错误：background 缩写会覆盖掉已设的 color /
.container {
background: rgba(255, 255, 255, 0.3) url(bg.png);
color: #000;
}
/ ✅ 正确：只动 background-color，保留其他 background 属性 /
.container {
background-color: rgba(255, 255, 255, 0.3);
background-image: url(bg.png);
background-blend-mode: overlay;
color: #333;
}
IE8 及更老浏览器不支持 rgba/hsla？那就用滤镜或 PNG 后备
如果你仍需兼容 IE8，rgba() 会直接失效（降级为透明黑）。这时候不能靠 JS 动态判断，得用 CSS 条件注释或现代构建工具自动加前缀/后备。
立即学习“前端免费学习笔记（深入）”；
- IE8 可用
filter: progid:DXImageTransform.Microsoft.gradient(...)模拟半透背景（仅限线性渐变，且性能差） - 更稳妥的是准备一张 1×1 像素的 PNG（如
bg-fade-30.png），用background-image回退 - 现代项目建议直接放弃 IE8，用
@supports (background-color: rgba(0,0,0,0.5))做特性检测
实际效果取决于背景内容复杂度和文字字号——纯色背景下 rgba() 很稳，但若背景是图片或渐变，就得反复调 alpha 值并实机测试，尤其在移动端 OLED 屏上，低 alpha 容易导致文字边缘发虚。
