17370845950

HTML本身不定义透明色，所谓“透明颜色代码”其实是CSS支持的带Alpha通道的颜色表示法；必须用rgba()、hsla()或opacity属性实现透明效果，其中rgba()和hsla()通过第4参数（0–1）控制颜色透明度，opacity则使整个元素及子内容统一变透明。

HTML里没有“透明颜色代码”这回事，只有RGBA、HSLA或opacity控制透明度

直接说结论：HTML本身不定义透明色，所谓“透明颜色代码”其实是CSS支持的带Alpha通道的颜色表示法。用#RRGGBB十六进制写法永远不透明；要调透明度，必须用rgba()、hsla()或opacity属性。

rgba()中第4个参数就是0–1的透明度，0=全透明，1=不透明

这是最常用也最直观的方式，尤其适合单个元素局部着色（比如按钮背景、文字阴影）：

• rgba(255, 0, 0, 0.5) 是半透明红色，alpha=0.5
• rgba(0, 0, 0, 0) 是完全透明的黑色——实际就是看不见
• rgba(0, 0, 0, 1) 等价于 #000 或 black
• alpha值小于0或大于1会被截断为0或1，浏览器不会报错但无效
• 注意：IE8及更早版本不支持rgba()，需提供降级色（如先写background-color: #000;，再覆盖background-color: rgba(0,0,0,0.3);）

opacity影响整个元素及其所有子内容，和rgba有本质区别

opacity是CSS属性，不是颜色值。它会让元素自身+所有子节点（文字、子div、图片）一起变透明，无法单独控制某一部分：

div {
  background-color: #333;
  color: white;
  opacity: 0.7;
}

上面这段会让灰色背景、白色文字、以及里面所有嵌套内容都变成70%不透明。如果只想让背景透而文字不透，就必须用rgba()设背景色，而不是opacity。

HSLA和RGBA逻辑一致，但用色相/饱和度/亮度描述颜色

如果你习惯用HSL调色（比如设计师常用），hsla()同样支持第4个alpha参数：

• hsla(120, 100%, 50%, 0.8) 是80%不透明的纯绿色
• hsla(0, 0%, 100%, 0) 是完全透明的白色（但视觉上就是空）
• 和rgba()一样，alpha超出[0,1]范围会被强制约束
• 兼容性与rgba()基本一致，现代浏览器全支持，IE9+可用

真正容易被忽略的是：透明度数值本身没有单位，也不是百分比——0.3就是30%不透明（即70%透明），别写成30%或30，那样会失效。