应使用 rgba() 或 hsla() 替代 opacity 实现局部透明，如 background-color: rgba(0,0,0,0.1) 控制背景透明而不影响子元素；必要时通过脱离文档流（如绝对定位）隔离需保持不透明的子元素。
opacity 设置后子元素全变透明，怎么单独控制子元素？
直接设 opacity 会让整个元素及其所有后代一起变透明，没法单独“恢复”某个子元素的不透明度——这不是 bug，是规范行为。因为 opacity 作用于整个渲染层，子元素无法通过设 opacity: 1 来抵消父级的透明效果。
常见错误现象：div 设了 opacity: 0.6，里面一个 button 也加了 opacity: 1，结果按钮还是半透明。
- 真正想让背景淡、文字不淡，应该用
background-color的 rgba 值，比如background-color: rgba(0, 0, 0, 0.1) - 文字颜色用
color: rgba(0, 0, 0, 0.9)单独控制，和背景解耦 - 如果必须用
opacity控制整体（比如做淡入动画），就别在内部再试图“逆转”，而是把要保持不透明的元素移出该 dom 层级，用绝对定位或 flex 子项脱离文档流
rgba() 和 hsla() 是更安全的透明替代方案
rgba() 和 hsla() 只影响对应属性（background-color、color、border-color 等），不会传染给子元素，语义清晰、控制粒度细。
使用场景：模态框遮罩层、卡片背景、文字高亮、按钮悬停态。
立即学习“前端免费学习笔记（深入）”；
-
rgba(255, 255, 255, 0.8)比opacity: 0.8更精准，只让背景透，文字照常清晰 - 注意 alpha 值范围是 0–1，不是 0–100；写成
rgba(0,0,0,50%)是无效的，浏览器会忽略整条声明 - IE8 及更早版本不支持
rgba()，如需兼容，得配Filter: progid:DXImagetransform.microsoft.gradient(...)或降级为半透 png
opacity 动画时子元素模糊/闪烁怎么办？
当对含大量子节点或带文字的容器做 opacity 动画时，部分浏览器（尤其旧版 chrome/safari）可能触发 subpixel 渲染问题，导致文字发虚或边缘闪烁。
根本原因是 opacity 触发了图层合成，但未启用硬件加速，或字体抗锯齿策略被干扰。
- 加
transform: translateZ(0)或will-change: opacity强制创建独立合成层，多数情况能稳住渲染 - 避免同时对同一元素频繁修改
opacity和transform，容易触发重绘抖动 - 如果只是淡入淡出，优先用
@keyframes+opacity，别用 js 每帧改style.opacity，后者性能差且易丢帧
opacity: 0 和 visibility: hidden / display: none 的区别
三者都“看不见”，但行为完全不同：opacity: 0 元素仍占布局空间、响应事件、可被屏幕阅读器读取；visibility: hidden 不响应事件但占空间；display: none 彻底退出渲染流程。
容易踩的坑：用 opacity: 0 实现“隐藏”按钮，结果用户还能点中、键盘还能 Tab 进去，造成可访问性问题。
- 纯视觉隐藏（如 loading 图标切换），用
opacity没问题 - 功能上要禁用交互，必须配合
pointer-events: none和aria-hidden="true" - 如果目标是彻底移除，别犹豫，用
display: none；动画过渡需求则用opacity+transition，结束后再切到display: none
事情说清了就结束。记住：透明不是非黑即白的选择，opacity 是开关，rgba() 是旋钮——用错地方，再小的 alpha 值也会让整个交互逻辑跑偏。