如何用CSS的RGBA制作不透明文字和透明背景？

推荐直接用background-color: rgba()设置背景透明度，仅影响背景色而不改变文字及子元素透明度；alpha值必须为0–1小数，不可用百分比或整数，且需避免background简写覆盖、opacity误用及伪元素分层遗漏。

background-color: rgba() 是唯一推荐的起点

直接给 background-color 赋值 rgba()，文字自然保持完全不透明——这是最轻量、最可控、也最不容易出错的方式。关键不是“怎么加透明”，而是别误触其他会污染子元素的属性。

1. rgba(0, 0, 0, 0.4) 表示黑色背景 + 40% 不透明（即 60% 透明），第四个参数必须是 0–1 的小数，不能写 40% 或 40
2. 必须用 background-color 单独声明；如果前面写了 background: #000 这类简写，它会清掉 alpha 值，DevTools 里能看到该行被划掉
3. 文字颜色（color）、边框（border-color）、阴影（box-shadow）全都不受影响，无需额外处理
4. IE9+、所有现代浏览器原生支持；若需兼容 IE8，得加 fallback：background-color: #000; 再跟一行 background-color: rgba(0, 0, 0, 0.4);，老浏览器自动忽略后一行

千万别用 opacity: 0.4 替代 rgba()

opacity 会让整个元素及其所有后代（包括文字、图标、子容器）一起变淡，这不是“背景透明”，是“整块糊了”。尤其在表单控件、弹窗标题、导航栏等场景下，文字可读性会直接崩掉。

1. 写 opacity: 0.4 后，即使再给 p 或 span 设置 opacity: 1 也无效——透明度是继承叠加的，无法被子元素单独拉回
2. 某些框架或 UI 库的组件内部已设 opacity，此时外部再套一层会进一步压暗，调试时容易误判来源
3. filter: opacity(0.4) 行为和 opacity 一致，且可能触发重绘性能问题，同样应避开

背景图需要半透明？必须用伪元素分层

rgba() 对 background-image 完全无效。想让图片“变暗”同时文字清晰，只能把背景图挪到伪元素上，再单独控制它的透明度。

1. 父容器加 position: relative，否则伪元素定位会脱标
2. 用 ::before 或 ::after 承载图片：content: "" + position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
3. 透明度写在伪元素上：opacity: 0.3（建议 0.2–0.7 区间，太低看不清图，太高压不住文字）
4. 如果父容器有 border-radius，伪元素也得同步设置，否则圆角边缘会漏出底层内容

hsla() 和 rgba() 可互换，但别混用预处理器语法

如果你的设计系统用 HSL 值（比如设计师给的是色相 200°、饱和度 100%、明度 50%），hsla() 是更自然的选择，行为和 rgba() 完全一致。

1. hsla(200, 100%, 50%, 0.7) 中的 a 参数同样是 0–1 小数，不是百分比
2. 原生 CSS 必须显式写 hsla()；Sass/Less 等预处理器可能允许 hsl() + opacity 写法，但输出后仍是 hsla()，别依赖未编译语法
3. 不要在一个项目里混用两种模型来回转换，容易因四舍五入导致色差，尤其在深色/浅色主题切换时明显

实际最难绷的点往往不在写法本身，而在团队协作中：有人顺手改了 background 简写覆盖掉 rgba()，或者在响应式断点里漏掉了伪元素的 z-index 同步——这些细节一旦漏掉，效果就全乱了。