rgb()不支持透明度，rgba()第四个参数为alpha值（0–1）；hsla()同理，hue用deg、saturation和lightness须带%；#RRGGBBAA是新十六进制透明写法；opacity作用于整个元素，而颜色alpha仅影响该颜色。
rgb() 和 rgba() 的透明度行为差异
rgba() 是带 alpha 通道的 rgb 表达式，第四个参数就是透明度；而 rgb() 本身不支持透明度，强行加第四个值会直接失效，浏览器当作无效声明忽略。
- 有效写法：
rgba(255, 0, 0, 0.5)（半透明红色） - 无效写法：
rgb(255, 0, 0, 0.5)（被忽略，回退为不透明黑） - alpha 值范围是
0（全透）到1（不透），支持小数，如0.15、0.875 - 不要用百分比写法（如
50%），rgba()不接受百分比形式的 alpha 参数
hsl() 与 hsla() 同理，但 hue 单位易混淆
hsla() 是 hsl() 的透明扩展版本，第四个参数同样是 alpha 值。注意：前三个参数中，hue 是角度单位（deg），不是度数符号；saturation 和 lightness 必须用百分比（%），不能省略。
- 正确：
hsla(120, 100%, 50%, 0.3)（半透明绿色） - 错误：
hsla(120deg, 100, 50, 0.3)（100和50缺少%，整条声明失效） - 错误：
hsl(120, 100%, 50%, 0.3)（hsl()不接受第四个参数，被丢弃）
十六进制颜色加 alpha 的新写法：#RRGGBBAA
CSS Color Module Level 4 支持 8 位十六进制写法，后两位即 alpha 值（00 到 FF），等价于 rgba(r,g,b,a) 中的 a（换算关系：AA 十六进制 → 十进制 ÷ 255）。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
#FF000080≈rgba(255, 0, 0, 0.5)（因为0x80 = 128，128 / 255 ≈ 0.5） - 浏览器兼容性需留意：Chrome 62+、Firefox 49+、Safari 12+ 支持；IE 完全不支持
- 简写形式
#RGBA（4 位）也存在，对应#RRGGBBAA的缩写，如#F008→#FF000088 - 不要混用：写成
#FF0000FF80或#FF0000.5都是非法语法，会被忽略
opacity 属性和 color alpha 的关键区别
opacity 作用于整个元素及其所有子内容（包括文字、边框、背景、子元素），而 rgba() 或 hsla() 的 alpha 只影响该颜色值本身（比如只让背景半透，文字仍 100% 不透明）。
立即学习“前端免费学习笔记（深入）”；
- 想让背景透、文字不透 → 用
background-color: rgba(0,0,0,0.2) - 想让整个卡片（含文字、图标）一起变淡 → 用
opacity: 0.2 -
opacity会触发重绘，且可能影响子元素的交互（如opacity: 0时元素仍占布局流、仍可被 focus，但点击穿透需额外处理） - 避免对动画元素频繁改
opacity，它无法被硬件加速；而rgba()背景色变化在多数场景下更轻量
/* 示例：背景半透但文字清晰 */
.card {
background-color: rgba(255, 255, 255, 0.9);
color: #333;
}
/* 错误示范：下面这行会让文字也变淡 */
/* opacity: 0.9; */alpha 值看似简单，但混合使用 opacity、rgba()、hsla() 和 #RRGGBBAA 时，最容易出问题的是单位遗漏、函数误用、以及浏览器兼容性预估偏差——尤其当设计稿直接给 “#0000001A” 却没说明最低支持版本时。
