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，结果是双重透明，往往过淡。
