Bootstrap模板标题透明度异常：部分Div文字穿透问题求助

这种层级和透明度的奇怪冲突我之前碰到过好几次，大概率是**CSS堆叠上下文（stacking context）**和opacity属性的坑在搞鬼！给你几个具体的排查方向：

• 先排查opacity引发的堆叠上下文问题
  如果你的jumbotron容器或者它的父元素设置了opacity < 1，会自动创建一个新的堆叠上下文。这时候容器里的所有子元素都会被“包裹”在这个上下文里，外部元素的层级计算会变得特殊：比如你的标题spice road可能处于jumbotron上下文的上方，但jumbotron内部的文字因为在同一个上下文里，层级反而比外部标题高，就会出现标题能看到文字却看不到jumbotron背景的情况。
  建议把jumbotron的半透明背景改成用rgba()（比如background-color: rgba(200,200,200,0.5)）代替opacity属性，这样不会创建堆叠上下文，层级计算会更符合预期。

• 检查元素的position和z-index设置
  确认标题spice road和LogoThe Spice Road的position属性不是默认的static（只有relative/absolute/fixed定位的元素，z-index才会生效）。然后在浏览器开发者工具里临时给标题设置一个极高的z-index（比如z-index: 9999 !important），看看能不能覆盖jumbotron里的文字和背景——如果可以，说明就是层级顺序的问题，调整对应的z-index值就能解决。

• 排查混合模式或特殊样式
  有没有给标题/logo设置过mix-blend-mode属性？比如multiply、screen这类混合模式可能会导致元素和下方文字产生混合效果，但和背景不交互，也会出现类似的诡异情况。可以临时把这个属性注释掉试试。

• 快速调试技巧
  打开浏览器开发者工具（F12），选中标题元素，在Styles面板里临时添加background: red !important，直观看到元素的覆盖范围；再逐一禁用blog.css和bootstrap.css里和透明度、定位相关的样式，快速定位到出问题的代码块。

内容的提问来源于stack exchange，提问作者xiaolingxiao