如何在CSS里用rgba实现半透明背景

rgba() 是首选方案，因其仅调整背景色透明度而不影响子元素；opacity 则会全局降低所有内容的不透明度。需避免 background 简写覆盖 rgba 值，正确做法是单独用 background-color 或将 rgba 写入 background 复合声明中。

直接用 background-color: rgba() 就行，别碰 opacity——后者会让文字、按钮、图标全跟着变灰，可读性和交互性立刻崩掉。

为什么 rgba() 是首选方案

因为 rgba() 只改背景色的 alpha 通道，不影响文字颜色、边框、子元素的透明度。它不是“让整个盒子变淡”，而是“只让背景色带点透光”。opacity 则是渲染层全局开关，一开全降级。

1. rgba(0, 0, 0, 0.4) 表示黑色背景，60% 透明（即 40% 不透明），底层内容隐约可见
2. 第四个参数必须是 0–1 的小数，不能写 50% 或 50，否则无效
3. 如果用了 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，会重置所有子属性。

1. 正确做法：只用 background-color 单独设色+alpha；图片用 background-image 分开声明
2. 或者把 rgba 写进 background 复合值里：background: rgba(0, 0, 0, 0.5) url(...)，注意顺序：颜色在前，图在后
3. 如果图和色要叠加，确保 rgba 层在上（靠前），否则会被图盖住

背景图上加半透明遮罩？rgba() 不管用

rgba() 对 url() 背景图完全无效。你给 background-color: rgba(0,0,0,0.5)，只是多了一层半透黑底，原图亮度、对比度一点没变。

1. 真正想“压暗图片同时保文字清晰”，得用伪元素：::before 承载背景图 + opacity，主容器放文字，靠 position: relative 和 z-index 控制层级
2. 漏掉 position: relative 在父容器上，伪元素可能定位错乱；忘了 z-index: -1，它就盖住文字了
3. 如果还要毛玻璃效果，得加 backdrop-filter: blur()，但注意性能开销和 Safari 兼容性

最易忽略的一点：rgba 的 alpha 值是「不透明度」，不是「透明度」。写 0.2 是 20% 不透明（80% 透），不是“20% 透明”——这个直觉反转会让人调半天才发现背景太淡或太实。