color: rgba() 是设置文字透明度的唯一干净解法，仅影响文字颜色本身；opacity 会连带子元素变透明、不可逆，且降低可读性。
用 color: rgba() 设置文字透明度，别碰 opacity
想让文字变半透，color: rgba(0, 0, 0, 0.4) 是唯一干净解法。opacity 会把整个元素（含子元素、图标、链接）一起拉低，文字发虚、可读性崩坏，且子元素写 opacity: 1 也救不回来。
常见错误现象：
-
<p style="opacity: 0.5">文字</p>→ 文字模糊，背景稍浅就几乎看不见 -
<span><strong>加粗词</strong>普通词</span>加了opacity后，两者一样灰，无法突出
实操要点：
- 必须用四元组：
rgba(255, 255, 255, 0.85)有效，rgb(255, 255, 255)没透明度 - 十六进制色值如
#333不支持 alpha，得转成rgba(51, 51, 51, 0.9)或改用hsla() - 深色背景上白字，alpha 建议 ≥ 0.85；浅色背景黑字，alpha ≥ 0.7 才勉强保对比度
hsla() 比 rgba() 更适合动态主题场景
当背景色会切换（比如暗黑/亮色模式），硬调 alpha 容易让文字在某一套背景下直接跌破 WCAG 4.5:1 对比度。这时优先调亮度（L%），再微调 A 值更稳。
立即学习“前端免费学习笔记（深入）”；
例如：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统一用
hsla(0, 0%, 30%, 1)表示深灰字 → 暗色背景时自动变亮（L%: 70%），无需改 alpha - 避免
rgba(0, 0, 0, 0.3)这种“一刀切”写法，在白色背景上几乎不可读 -
hsla()第四个参数也是 0–1 小数，不是百分比：hsla(200, 100%, 50%, 0.6)正确，hsla(..., 60%)无效
background-color: rgba() 和 color: rgba() 别混着写
一个容器既要背景半透、又要文字清晰，就得分开控制：背景用 background-color: rgba()，文字用独立的 color: rgba() 或纯色。混用 opacity 是最常见翻车点。
典型错误写法：
-
background-color: #fff; opacity: 0.85;→ 文字、边框全跟着变灰 -
background-color: rgba(255, 255, 255, 0.85); color: #000;→ 正确，背景透、文字实 - 如果背景是图片，用
::before伪元素画一层background-color: rgba(0,0,0,0.2)并设z-index: -1，主元素文字保持原色
IE8 及更老浏览器的降级处理已基本可忽略
现代项目里，rgba() 和 hsla() 兼容性没问题（IE9+、所有主流浏览器均支持）。所谓“兼容 IE8”只存在于极少数政企老旧系统维护场景。
若真撞上：
-
rgba()完全不可用，只能放弃背景/文字单独透明，妥协为整体opacity或用半透明 PNG 图片 -
filter: alpha(opacity=80)仅对块级元素生效，且会触发 hasLayout，可能引发浮动错位、margin 折叠异常 - 不要试图用 JS 动态注入滤镜——性能差、不可靠，不如直接提示“请升级浏览器”
真正容易被忽略的是结构污染：只要文字和背景共处同一 DOM 节点，就永远绕不开透明度传递。拆层（伪元素、额外 wrapper）有时比调参数更重要。
