rgba()是最直接的透明颜色写法，前三个参数为RGB值（0–255），第四个为alpha透明度（0全透，1不透）；linear-gradient()需在色标中显式使用rgba()实现渐变透明；opacity会全局影响子元素，不可替代背景层透明。
rgba() 是最直接的透明颜色写法
HTML 本身没有“透明颜色代码”，真正起作用的是 CSS 中的 rgba() 或 hsla()。其中 rgba() 最常用：前三个参数是红、绿、蓝（0–255），第四个是 alpha 透明度（0 完全透明，1 完全不透明）。比如半透黑：rgba(0, 0, 0, 0.5)，浅灰半透：rgba(200, 200, 200, 0.3)。
注意：不能写成 #00000080 这种八位十六进制色值来直接替代——它在部分老浏览器（如 IE11 及更早）不支持，且不是所有 CSS 属性都接受该写法（例如 border-color 在 Safari 15.4 前对八位色支持不稳定）。
linear-gradient() 配合 rgba 实现渐变+透明
CSS 渐变本身不内置“全局透明度”，必须把透明度写进渐变色 stops 里。比如从左到右由半透黑过渡到完全透明：
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 写成
linear-gradient(..., black, transparent)——transparent等价于rgba(0,0,0,0)，但若起始色是纯色（如#333），和transparent混合时浏览器会按“颜色空间插值”计算，视觉上可能偏灰或发暗，不如显式用rgba()控制每个 stop 的 alpha 值可靠 - 在渐变中混用不同色模型（如
rgb(255,0,0)和hsla(120,100%,50%,0.5)）——浏览器虽能解析，但插值路径不一致，可能导致中间色偏移
opacity 不能替代渐变透明，会污染子元素
opacity 作用于整个元素及其所有后代，一旦设为 0.7，里面文字、按钮、图标全跟着变淡。而渐变透明只影响背景层，内容保持 100% 不透明。所以：
- 需要局部背景淡入/淡出 → 用
background: linear-gradient()+rgba() - 整块区域统一降 opacity → 才用
opacity，但要小心子元素交互体验下降 - 想让边框或文字也渐变透明？那得分别对
border-color或color单独写渐变（CSS 尚不支持，只能靠伪元素遮罩或 SVG）
兼容性与 fallback 要手动写
现代浏览器都支持 rgba() 和 linear-gradient()，但如果你必须兼容 IE9 及更早版本：
- IE9 不支持
rgba()作为 background，可用filter: progid:DXImageTransform.Microsoft.gradient()（仅限 IE），但写法复杂且不推荐维护 - 更实际的做法是提供 solid color fallback：
background: #000; /* IE8 及以下 fallback */<br>background: rgba(0, 0, 0, 0.5); /* 支持 rgba 的浏览器 */<br>background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* 渐变层，覆盖前面的 rgba */
- 注意：CSS 解析是自上而下覆盖的，后写的
background会覆盖前面的，所以 solid fallback 必须写在最前面
真正难的不是写法，而是判断哪一层该透明、哪一层该保留清晰度——比如模态框蒙层要用渐变透明避免边缘生硬，但里面的卡片阴影又得保持锐利，这种细节没法靠一个属性解决。
