color支持rgba()、hsla()、8位hex（#rrggbbaa）、css color module level 4新语法rgb(r g b / a)和hsl(h s l / a)等带alpha通道的颜色格式，可精准控制文字透明度而不影响其他元素。
color 属性本身不支持直接传入 opacity 值，但你可以用带 alpha 通道的颜色值来实现文字颜色的透明效果——关键不是加 opacity，而是换用支持透明度的颜色表示法。
color 支持哪些带透明度的颜色格式？
color 只接受颜色值，不接受独立透明度参数。但它能识别以下含 alpha 的格式：
-
rgba(255, 0, 0, 0.4)：红字，40% 不透明（即 60% 透明） -
hsla(0, 100%, 50%, 0.4)：同上，只是 HSL 表达方式 -
#ff000066：8 位 HEX，后两位66≈ 40% 不透明（00= 完全透明，ff= 完全不透明） -
rgb(255 0 0 / 0.4)或hsl(0 100% 50% / 0.4)：CSS Color Module Level 4 新语法，更简洁，兼容性已覆盖 Chrome 100+、Firefox 96+、Safari 15.4+
为什么不能对 color 元素加 opacity？
给文字容器加 opacity: 0.4 看似简单，但会连同子元素、伪元素、甚至文字阴影一起变淡，而且无法单独控制文字与背景的叠色关系。比如：
.text { color: red; opacity: 0.4; }
如果这个 .text 里有 ::before 图标或嵌套 <strong></strong>，它们都会被压暗——这不是“文字透明”，而是“整个盒子发灰”。
而用 color: rgba(255, 0, 0, 0.4)，只影响文字本身的颜色通道，背景、边框、子元素完全不受干扰。
HEX 8位写法（#RRGGBBAA）的坑要注意
8 位 HEX 是最简写法，但容易误算透明度值：
-
#00000000是纯黑且完全透明 → 文字看不见（不是“隐形”，是渲染为 transparent black） -
#00000080中的80十六进制 = 128 十进制 → 128/255 ≈ 50.2% 不透明，不是直觉上的 50% - 想精确对应小数 alpha（如 0.3），推荐用
rgb(r g b / 0.3)，浏览器自动换算，不用手算十六进制 - Safari 15.4 之前不支持 8 位 HEX，若需兼容 iOS 15.3 及更早版本，应降级为
rgba()或hsla()
真正要控制文字透明，别碰 opacity，盯死颜色函数里的 alpha 参数；用新语法前先查 CanIUse，8 位 HEX 虽香，但透明度映射不是线性的，手算容易偏一档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
