HTML中无“透明颜色代码”，transparent是唯一透明颜色关键字但无alpha控制；可控透明需用rgba()（颜色级，不影响子元素）或opacity（元素级，影响全部后代），二者机制不同不可混用。

HTML 里没有“透明颜色代码”这种独立写法，transparent 是唯一合法的透明颜色关键字，但它不带 alpha 通道控制；真正可控的透明效果得靠 rgba() 或 opacity，但二者作用机制完全不同，混用容易出问题。

rgba() 是颜色级别的透明，只影响当前元素的背景或文字色

rgba() 在 rgb() 基础上加第四个参数（alpha），取值范围是 0（全透）到 1（不透），支持小数（如 0.75）。它只改变你指定的那个颜色属性，不影响子元素。

• 适用于：background-color、color、border-color 等接受颜色值的 CSS 属性
• 常见错误：写成 rgba(0, 0, 0, 0.5) 却放在 opacity 属性里——会直接失效，因为 opacity 只接受数字或 inherit
• 兼容性：IE9+ 支持；IE8 及更早版本不支持，需备选方案（如 filter: alpha(opacity=50)，但已废弃）

div {
  background-color: rgba(255, 0, 0, 0.3); /* 半透红底，文字和子元素不透明 */
  color: rgba(0, 0, 0, 0.8);             /* 稍暗的文字，不影响背景 */
}

opacity 是整个元素的透明，包含所有子内容

opacity 是 CSS 属性，作用于整个元素及其所有后代节点。设为 0.5，等于把该元素整体“调暗 50%”，子元素无法通过设置 opacity: 1 挽回。

• 适用场景：需要整块区域（含图标、文字、按钮）统一变淡时，比如模态框遮罩层
• 性能注意：设了 opacity 的元素会触发 GPU 合成层，频繁动画可能增加内存开销
• 不能继承：父元素设了 opacity: 0.6，子元素即使声明 opacity: 1，最终仍是 0.6 × 1 = 0.6

.overlay {
  opacity: 0.4;
  background-color: #000; /* 此处用纯黑即可，透明由 opacity 控制 */
}

transparent 关键字只用于颜色属性，不是万能替代

transparent 是一个预定义颜色值，等价于 rgba(0, 0, 0, 0)，但它**不能用于 opacity，也不能带 alpha 调节**。它常用于重置边框、背景等，避免浏览器默认色干扰。

• 正确用法：border: 1px solid transparent、background-color: transparent
• 错误用法：opacity: transparent（语法报错）、rgba(transparent, 0.5)（无效）
• 注意：某些老框架（如 Bootstrap 2）用 transparent 做占位，现代项目建议明确写 rgba() 或 hsla() 提高可维护性

真正难的是判断该用哪个：要局部控色就选 rgba()，要整体压暗就用 opacity，而 transparent 只是“彻底无色”的快捷写法。三者不能互相替换，也不能叠加出预期效果——比如对一个 rgba() 背景再加 opacity，结果是双重透明，往往过淡。