颜色名无alpha通道，无法控透明度；用opacity会连文字子元素一起变淡且不可逆，应改用rgba()或hsla()精准控制颜色透明度。
颜色名（如 red、blue、transparent）本身不带 alpha 通道，无法控制透明度——这不是浏览器 bug，而是 CSS 规范的硬性限制。
为什么 color: red; 后加 opacity 不是好办法
直接写 color: red; opacity: 0.5; 看似能变淡，但会连同文字、边框、阴影甚至子元素一起变透明。常见副作用包括：
- 按钮内图标和文字同时发灰，可读性下降
- 父容器设了
opacity: 0.7，子元素再设opacity: 1也无效（透明度是乘法叠加） - 用
opacity做 hover 动画时，整个 DOM 树重绘开销更大，尤其在移动端容易卡顿
rgba() 是最直接的替代方案
把颜色名转成对应 RGB 值再补 alpha，例如 red → rgba(255, 0, 0, 0.6)。注意三点：
-
rgba()第四个参数必须是0–1小数，rgba(255, 0, 0, 60%)或rgba(255, 0, 0, 128)都不合法 - 别手误写成
rgb(255, 0, 0, 0.6)——rgb()只接受三个参数，第四个会被忽略，结果仍是完全不透明 - 旧版 IE（≤8）不支持
rgba()，若必须兼容，可用filter: progid:DXImageTransform.Microsoft.gradient(...)模拟，但仅限背景，且已淘汰
hsla() 更适合主题系统与动态调色
比如品牌主色是 #09face，想生成半透版本：hsla(192, 94%, 55%, 0.4)。优势在于：
- 明度（
lightness）和 alpha 分离，调深色模式时只需改明度值，不用重算 RGB - 色相（
hue）可动画，避免rgba()插值导致的颜色跳变（如红→蓝途中经过棕灰） - 斜杠语法
hsl(192 94% 55% / 0.4)更简洁，但 Safari 15.4 之前、Firefox 95 之前不认，生产环境建议坚持逗号分隔写法
真正容易被忽略的是：所有带 alpha 的颜色函数（rgba、hsla、lab、oklch 等）都只影响“该属性所作用的颜色”，比如 border-color: rgba(0,0,0,0.2) 不会让边框内的文字变淡，但 background-color: hsla(0,0%,0%,0.1) 若设在父容器上，子元素又没设背景，就会透过来看到混合后的灰蒙效果——这常被误认为是“继承”，其实是层叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
