html中无“透明颜色代码”独立属性，透明需用css的#rrggbbaa或rgba()定义颜色，或opacity控制整个元素；前者仅影响指定颜色，后者影响元素及子元素全部内容。
HTML透明颜色代码是十六进制或RGB(A)值，不是独立属性
HTML里没有“透明颜色代码”这个独立概念，所谓“透明色”实际是CSS中定义的颜色值，比如 #00000000（8位十六进制）或 rgba(0, 0, 0, 0)。这些值必须用在CSS属性中（如 color、background-color），不能直接写在HTML标签的 style 外或作为HTML属性值使用。
常见误解是把 opacity="0" 当作HTML属性——它根本不存在于HTML规范中，浏览器会忽略。
-
#RRGGBBAA格式需注意：只有现代浏览器支持（Chrome 69+、Firefox 49+、Safari 12+），IE完全不支持 -
rgba()兼容性更好（IE9+），但 alpha 通道只作用于该颜色本身，不影响子元素 - 写成
#0000或#00000000时，如果CSS解析失败（比如旧浏览器），会退回到不透明黑色#000或报错后失效
opacity 是CSS属性，影响整个元素及其所有子内容
opacity 是纯CSS属性，取值范围是 0（完全透明）到 1（完全不透明），支持小数如 0.5。它和颜色透明不同：它会让整个元素（包括文字、边框、子div、背景图等）统一变透明，且会继承影响子元素。
div {
background-color: #333;
color: white;
opacity: 0.3;
}
上面这段CSS会让文字、背景、内边距区域全部以30%不透明度渲染，子元素无法通过设置 opacity: 1 恢复——因为它是层叠效果，不是颜色叠加。
立即学习“前端免费学习笔记（深入）”；
-
opacity会触发新层叠上下文（stacking context），可能意外改变z-index行为 - 动画性能较好（GPU加速友好），但若只是想让背景透明而文字保持不透明，用它就错了
- 与
visibility: hidden不同，opacity: 0仍占布局空间、仍可被聚焦、仍响应事件（除非额外加pointer-events: none）
什么时候该用颜色透明，而不是 opacity
当只需要局部透明（比如仅背景透、文字不透；仅边框透、填充不透），必须用带alpha的颜色值。这是最常见也最容易出错的选择场景。
- 按钮背景用
background-color: rgba(0, 120, 255, 0.1)，文字保持color: #0078ff完全不透明 - 渐变背景中混入透明色：
background: linear-gradient(to right, #fff, rgba(255,255,255,0)) - 避免用
opacity实现“半透遮罩”，否则遮罩上的图标/文字也会变淡——正确做法是用background-color: rgba(0,0,0,0.5)单独设遮罩层 - SVG中填色或描边要用
fill="rgba(0,0,0,0.2)"或stroke="#00000033"，不能用opacity控制单个图形的透明度（除非你真想连路径描边粗细都视觉变细）
兼容性和调试时容易忽略的细节
颜色透明和 opacity 在DevTools里看起来都是“变淡了”，但它们的渲染机制完全不同，调试时混淆会导致定位错误。
- 在Chrome DevTools的Styles面板中，
rgba()和opacity都会显示为“半透明”，但前者在Color Picker里能点开调alpha，后者只会显示一个滑块 - 使用PostCSS或构建工具时，
rgba()可能被自动转成hex（不带alpha）或降级为filter: alpha(opacity=xx)（IE旧语法），需检查输出结果 -
opacity的值不会被CSS自定义属性（--my-opacity）直接用于颜色计算，但rgba()中的alpha可以绑定变量：background-color: rgba(255, 0, 0, var(--alpha, 0.5)) - 高对比度模式下，部分系统会强制重置
opacity为1，但带alpha的颜色值通常保留（取决于UA样式表干预程度）
opacity 而非颜色alpha。选哪个，先问一句：要透的是“这个颜色”，还是“整个盒子”。 
