应使用 background-color 的 rgba 或 hsla 值实现背景透明而文字不透明，而非 opacity；opacity 会使整个元素及其子元素一同变透明，影响交互与渲染性能。
opacity 会让子元素一起变透明，这不是“局部透明”
用 opacity 确实能让元素变透明，但它作用于整个渲染树节点——包括所有子元素。如果你只希望背景透明而文字保持不透明，直接设 opacity: 0.5 会连文字也变淡，这不是真正的“局部控制”。
- 常见错误现象：
div设了opacity: 0.3，结果里面p、button全都发虚，交互感变差 - 根本原因：opacity 是层叠上下文属性，浏览器把整个元素及其后代当成一个整体做透明混合
- 真正需要的，是只让背景“透”，内容不动——该用
background-color的 rgba 值
用 rgba() 或 hsla() 替代 transparent 背景色
保持文档流不变、又只透明背景，最直接的方式是改背景色本身，而不是动整个元素的 opacity。
-
background-color: rgba(255, 255, 255, 0.1)—— 白底带 10% 不透明度，文字和边框完全不受影响 -
background-color: hsla(200, 100%, 50%, 0.2)同理，更适合调色场景 - 注意不要写成
background: rgba(...) 0 0这类简写漏掉其他 background 属性，容易覆盖background-image或background-repeat - IE9+ 支持 rgba；如需兼容 IE8，可用
filter: progid:DXImageTransform.Microsoft.gradient模拟，但仅限纯色背景
opacity 和 visibility 都不脱离文档流，但行为完全不同
用户常混淆“透明”和“隐藏”，其实两者对布局的影响虽一致（都不脱离文档流），但语义和响应行为天差地别。
-
opacity: 0：元素还在，能响应hover、click，只是看不见；适合做淡入淡出动画 -
visibility: hidden：不可见且不响应事件，但占位仍在；适合临时屏蔽但保留布局结构 -
display: none才真正脱离文档流——这点常被误当作“透明方案”，但它会引发重排，慎用 - 如果目标是“点击穿透”，得加
pointer-events: none，和 opacity 无关
opacity 动画要配 will-change，否则可能闪屏或卡顿
直接对 opacity 做 CSS 动画（比如 transition: opacity 0.3s）看似简单，但在某些浏览器（尤其是旧版 Safari 和 Android WebView）上容易触发重绘抖动。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：给元素加
will-change: opacity，提示浏览器提前升层为合成图层 - 更稳妥的写法：
transform: translateZ(0)或backface-visibility: hidden，也能触发硬件加速 - 别滥用：每个加
will-change的元素都会占用额外内存，只在真实需要动画的元素上设置 - 测试时注意：opacity 动画在低功耗设备上仍可能掉帧，优先用
transform+opacity组合而非纯 opacity 变化
opacity 就只是“变淡”，但它悄悄把整个子树拖进透明混合流程，连 SVG 的 fill 和 stroke 都会参与计算。真要精细控色，还是老实用 rgba 调背景。 
