rgba() 是首选方案，因其仅调整背景色透明度而不影响子元素；opacity 则会全局降低所有内容的不透明度。需避免 background 简写覆盖 rgba 值，正确做法是单独用 background-color 或将 rgba 写入 background 复合声明中。
直接用 background-color: rgba() 就行，别碰 opacity——后者会让文字、按钮、图标全跟着变灰，可读性和交互性立刻崩掉。
为什么 rgba() 是首选方案
因为 rgba() 只改背景色的 alpha 通道，不影响文字颜色、边框、子元素的透明度。它不是“让整个盒子变淡”，而是“只让背景色带点透光”。opacity 则是渲染层全局开关，一开全降级。
-
rgba(0, 0, 0, 0.4)表示黑色背景，60% 透明（即 40% 不透明），底层内容隐约可见 - 第四个参数必须是
0–1的小数，不能写50%或50，否则无效 - 如果用了
background: #000这类简写，会覆盖掉前面的background-color: rgba()，DevTools 里能看到被划掉（strike-through）
常见错误：background 简写清掉了 alpha
很多人写了 background-color: rgba(0, 0, 0, 0.5)，但紧接着又写了一行 background: url(...) no-repeat center，结果前者的 alpha 被后者的复合声明直接抹掉——background 是 shorthand，会重置所有子属性。
- 正确做法：只用
background-color单独设色+alpha；图片用background-image分开声明 - 或者把 rgba 写进
background复合值里：background: rgba(0, 0, 0, 0.5) url(...)，注意顺序：颜色在前，图在后 - 如果图和色要叠加，确保 rgba 层在上（靠前），否则会被图盖住
背景图上加半透明遮罩？rgba() 不管用
rgba() 对 url() 背景图完全无效。你给 background-color: rgba(0,0,0,0.5)，只是多了一层半透黑底，原图亮度、对比度一点没变。
立即学习“前端免费学习笔记（深入）”；
- 真正想“压暗图片同时保文字清晰”，得用伪元素：
::before承载背景图 +opacity，主容器放文字，靠position: relative和z-index控制层级 - 漏掉
position: relative在父容器上，伪元素可能定位错乱；忘了z-index: -1，它就盖住文字了 - 如果还要毛玻璃效果，得加
backdrop-filter: blur()，但注意性能开销和 Safari 兼容性
最易忽略的一点：rgba 的 alpha 值是「不透明度」，不是「透明度」。写 0.2 是 20% 不透明（80% 透），不是“20% 透明”——这个直觉反转会让人调半天才发现背景太淡或太实。
