opacity 设置后子元素也变透明，怎么只让背景透明？
直接用 opacity 会让整个元素及其所有子节点一起变淡，这不是“背景透明”，而是整块渲染层的透明度叠加。真要只透背景、文字保持清晰，得换思路。
- 用
background-color的rgba()值替代：比如background-color: rgba(0, 0, 0, 0.3);，其中第四个参数是 alpha 通道，只影响背景色本身 - 避免对容器设
opacity，尤其当里面含文字、按钮、图标时——它们会跟着模糊、难点击、可访问性下降 -
opacity: 0会让元素不可见但仍在文档流中且仍响应事件；如果想彻底移出交互，得配合pointer-events: none或改用visibility: hidden
opacity 和 rgba 透明度表现不一致？
表现差异不是 bug，而是作用层级不同：opacity 作用于整个渲染盒子（包括边框、滚动条、子元素），而 rgba() 只作用于它所应用的那个属性值（如背景色、边框色）。
- 给
border设rgba(0,0,0,0.2)，只有边框半透；设opacity: 0.2，连边框里的文字阴影都会变淡 - 动画中用
opacity性能较好（触发合成层），但频繁变化仍可能引起重绘；rgba()背景在部分旧安卓 WebView 中有轻微闪烁 - IE8 不支持
rgba()，但支持opacity（需用filter: alpha(opacity=50)降级）
opacity 导致 z-index 分层失效？
是的。一旦父元素设置了 opacity（哪怕只是 opacity: 0.99），它就会创建新的层叠上下文（stacking context），内部子元素的 z-index 只在这个新上下文中生效，不再和外部兄弟元素比高低。
- 常见症状：弹窗盖不住顶部导航栏，尽管弹窗
z-index是 9999，导航栏是 1000——很可能因为弹窗父容器有opacity - 排查方法：在 DevTools 中看元素 computed 样式，若出现
stacking context: true且来源是opacity，基本就是它 - 解法不是去掉
opacity，而是把需要高置顶的元素（比如弹窗）提级到同级容器下，脱离那个带opacity的父上下文
opacity 动画卡顿或闪一下再开始？
初始状态没预设，浏览器得先计算布局再过渡，就容易闪。另外，非合成属性动画（如 opacity 在某些条件下）可能走主线程重绘。
立即学习“前端免费学习笔记（深入）”；
- 确保起始态明确：不要依赖默认值，显式写
opacity: 1或opacity: 0在 CSS 初始规则里 - 加
will-change: opacity提前提醒浏览器优化（但别滥用，只在真正动画的元素上加） - 移动端 Safari 对
opacity动画较敏感，若仍有卡顿，可尝试用transform: translateZ(0)强制硬件加速（不过现代浏览器通常已自动处理）
