用 rgba() 控制文字透明度最稳妥，仅影响文字颜色通道；opacity 会连带子元素和背景变透明，且影响渲染性能与层叠上下文，仅适用于无子元素的纯文本容器。
用 color 配合 rgba() 控制文字透明度最稳妥
直接改 color 的 alpha 通道，是唯一能只让文字变透、不影响背景或边框的方案。别碰 opacity，它会让整个元素（包括子元素）一起发虚，文字周围如果有阴影、图标或伪元素，全会跟着淡掉。
常见错误现象：opacity: 0.5 后发现按钮上的图标也变半透明了，或者文字叠加在卡片上时，背景色也被“透”出异常灰度。
-
color: rgba(0, 0, 0, 0.7)—— 黑色文字，70% 不透明度 -
color: rgba(255, 128, 64, 0.3)—— 橙红色文字，30% 不透明度 - 十六进制不支持 alpha，
#33333380是 CSS4 扩展写法，IE 和旧版 Safari 不认，慎用
opacity 什么时候能用？只用于整块文字容器且无子元素干扰
如果你的 <p></p> 里只有纯文本、没 <span></span>、没 ::before、没图标字体，那 opacity 确实最简——但它不是“设置文本透明度”，而是“让这个盒子变透明”。本质不同，别混淆。
使用场景：模态框遮罩层上的提示语、静态 banner 标题（确定无任何装饰性子节点）。
立即学习“前端免费学习笔记（深入）”；
-
opacity会继承，父设 0.5，子元素即使设opacity: 1也无效 - 它影响渲染层级，可能触发重绘，动画中频繁修改比
rgba()更耗性能 - 和
transform一起用时，容易意外创建新层叠上下文，导致 z-index 行为异常
IE 兼容要小心：rgba() 在 IE9+ 支持，但滤镜已淘汰
IE8 及更早版本不支持 rgba()，有人翻出 filter: alpha(opacity=70)，但它是全元素透明，且和现代 CSS 冲突严重，现在连 polyfill 都不推荐加了。
现实建议：如果必须兼容 IE8，就放弃“仅文字透明”，统一用 opacity + 单独容器包裹文字；否则，直接用 rgba()，把 IE8 用户当作已退出主流场景处理。
- 检查构建工具是否自动插入
filter（比如旧版 Autoprefixer），手动关掉 -
rgba()在 iOS Safari 6.1+、Android Browser 4.4+ 均稳定，不用加前缀
文字透明 ≠ 视觉可读性，别忘了对比度校验
调低 alpha 后，文字可能糊成一片，尤其浅灰字配白底、或深字配渐变背景。浏览器不会报错，但 WCAG 2.1 AA 级要求最小对比度 4.5:1，靠肉眼很难判断。
- 用浏览器开发者工具的“颜色选取器”点开
color值，它会实时显示当前对比度评分 - 避免
rgba(0,0,0,0.3)这类极低 alpha 值配白色背景——实际就是灰蒙蒙一道影子 - 深色模式下，同一
rgba()值在不同背景上对比度突变，需额外媒体查询适配
透明度本身很简单，难的是在视觉、可访问性、兼容性和 DOM 结构之间找那个刚好不破的平衡点。
