应使用rgba控制背景透明而保持文字清晰，opacity会使整个元素及子元素变透明；两者均影响颜色对比度，需确保符合WCAG标准且动画仅作用于opacity或transform以避免卡顿。
opacity 会让整个元素及其子元素一起变透明
很多人想只让背景变半透，结果用了 opacity，发现文字也模糊了——这是最常踩的坑。因为 opacity 是作用于整个渲染盒（rendering box），包括子节点，无法单独控制某一层。
适用场景：需要整体淡入淡出、模态框遮罩层、全局禁用状态。
-
opacity值范围是0（全透明）到1（不透明），不支持百分比 - 设置
opacity: 0.5后，子元素即使显式设成opacity: 1也没用 - 会触发新层叠上下文（stacking context），可能影响
z-index行为 - 动画性能尚可，但频繁变化仍建议搭配
will-change: opacity或用transform替代
RGBA 颜色值只影响指定颜色通道，不波及子元素
真正想“只让背景半透、文字保持清晰”，该用 rgba() 设置 background-color 或 color。它把 alpha 通道绑定在颜色本身，和结构无关。
常见误写：background: rgba(0,0,0,0.5) url(...) —— 这样图片不会变透明，但纯色背景会；如果想图片也半透，得另套一层伪元素或 wrapper。
-
rgba(r, g, b, a)的a参数是0–1小数，不是百分比 - 不能用于
border-color以外的边框属性（比如border-width不接受 rgba） - IE8 及更早版本不支持
rgba，需提供fallback十六进制色值（如先写#000，再覆盖rgba(0,0,0,0.5)） - 和
opacity不同，rgba不影响层叠上下文，z-index行为更可预测
transition opacity 动画卡顿？检查是否触发重排
给 opacity 加 transition 本应走合成器（compositor）线程，很流畅。但如果元素同时有 top、left、width 等会触发 layout 的属性在动，浏览器就不得不降级到主线程重绘，动画立刻掉帧。
- 确保只对
opacity和transform做过渡，其他属性别混进来 - 加
will-change: opacity提前提示浏览器优化（但别滥用，会增加内存开销） - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看动画时是否大面积绿色闪动——那是重绘信号
- 移动端 Safari 对
opacity动画支持稳定，但老 Android WebView 可能有闪烁，可改用transform: translateZ(0)强制硬件加速
opacity 和 rgba 在可访问性上的差异
两者都影响颜色对比度，但影响方式不同：屏幕阅读器不关心 opacity，但会读出你写的文字；而如果用 rgba 把文字颜色设得太淡（比如 rgba(0,0,0,0.3)），WCAG 对比度检测工具会直接报错——因为它算的是最终呈现的颜色值。
- 用
opacity降低文字透明度，等于主动削弱对比度，极易不达标 -
rgba背景 + 深色文字 是更安全的组合，可用 WebAIM 对比度检查器 验证 - 别为了“视觉柔和”牺牲可读性：灰色文字配半透黑背景，实际对比度可能低于 4.5:1
事情说清了就结束。关键就一点：要控整体透明用 opacity，要控局部颜色透明用 rgba；但无论哪种，都得盯着对比度和动画触发条件——这两处最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
