应避免使用 opacity 控制重叠区域透明度——它会污染子元素、导致叠加过暗、触发新层叠上下文使 z-index 失效；正确做法是结构隔离，如用伪元素分离背景与文字图层。
别用 opacity 控制重叠区域的透明效果——它会让所有子内容一起变灰、叠加后更暗、z-index 行为异常，真正要的是结构隔离。
重叠元素透明度错乱？先检查是否误用了 opacity
两个带 opacity: 0.5 的 div 层叠，视觉上不是“50% + 50% = 100%”，而是按 alpha 合成规则叠加，结果比预期更暗（类似 Photoshop 正片叠底）。更麻烦的是：父容器设了 opacity，子元素写 opacity: 1 也救不回来，因为合成发生在父级输出之后。
- 常见现象：
.card设了opacity: 0.8，里面按钮文字发虚、hover 反馈变弱 - 调试重点：用开发者工具逐层检查祖先节点，90% 的“意外透明”来自三层以上
opacity遗留 - 替代方案：把需要独立控制透明的部分从 DOM 树中拆出来，用定位模拟重叠关系
背景图半透明 + 文字清晰？必须用伪元素隔离图层
背景是 background-image 时，rgba() 无效；直接加 opacity 会污染文字。唯一可靠做法是用 ::before 抽出背景层，单独控它的透明度。
-
.hero必须设position: relative -
.hero::before要有content: ""、position: absolute、inset: 0（或显式top/left/width/height） -
z-index: -1确保伪元素在文字底下，且不拦截鼠标事件 - 避免用
filter: opacity()——Windows 下易触发字体渲染异常，iOS Safari 16.4+ 才稳定支持filter: blur()
z-index 失效或遮挡错乱？大概率是 opacity 创建了新层叠上下文
opacity 值不等于 1 时，浏览器会强制创建新的层叠上下文（stacking context），导致 z-index 只在该上下文内生效，跨上下文比较失效。比如固定导航栏盖不住轮播图，往往不是 z 值不够，而是两者分属不同层叠上下文。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：在开发者工具里看元素 computed 样式，若出现
transform: none但仍有will-change: auto或opacity ，基本就是它 - 修复思路：要么统一移除相关元素的
opacity，改用rgba()；要么显式提升目标元素的z-index并确保其父容器也参与同一层叠上下文（如加position: relative） - 滚动穿透风险：固定定位的透明导航盖在 touch 区域上时，需确认轮播容器
z-index> 导航，否则 iOS 上可能拦截滑动事件
真正难的从来不是怎么写那行 rgba(0,0,0,0.4)，而是意识到：只要文字和背景共处同一个 DOM 节点，就永远绕不开透明度污染。结构拆分比参数微调重要得多。
