opacity与rgba混用显示异常原因咨询：伪元素与文本问题

这个问题的核心其实是CSS堆叠上下文的渲染规则，再加上rgba和opacity的叠加逻辑差异导致的，我来拆解一下：

为什么会出现灰色标题？ #

首先看你的代码结构：#banner的:after伪元素是用来做深色遮罩的，而.transparent标题是#banner的直接子元素。这里的关键问题出在堆叠顺序上：

你没有给#banner设置z-index（默认是auto），这意味着它不会创建独立的堆叠上下文。此时，:after伪元素作为#banner的"虚拟子元素"，在DOM渲染顺序上是排在所有真实子元素之后的。虽然你给.transparent加了z-index:2，但在没有独立堆叠上下文的情况下，浏览器对伪元素的堆叠优先级处理可能会让:after遮罩层意外地盖在标题上方。

当标题用rgba(255,255,255,.5)时，文字的半透明是仅针对文字本身的——它会让下方的所有内容（包括盖在它上面的:after黑色遮罩）透过文字显示出来。半透的白色叠加在半透的黑色上，最终就会呈现出偏深的灰色，看起来就像遮罩层在标题区域"失去了透明度"。

为什么换成十六进制+opacity就正常？ #

当你改用color:#ffffff; opacity:0.5时，opacity是作用于整个标题元素的。这意味着整个标题（包括文字和它的堆叠层级）都是半透明的：即使:after遮罩层在它上方，半透的白色标题叠加在半透的黑色遮罩上，视觉上会呈现出符合预期的"半透白色文字+深色背景"效果——因为opacity让整个元素的叠加逻辑更直观，不会出现rgba那种"文字自身半透却被上层遮罩影响"的情况。

怎么解决这个问题？ #

有两个简单的修复方法：

• 给#banner设置z-index：比如添加z-index:0，让它创建独立的堆叠上下文。此时所有子元素（包括:after和标题）的z-index都会相对于#banner计算，z-index:2的标题自然会排在z-index:auto（相当于0）的:after遮罩层上方。
• 给:after明确设置z-index：直接给#banner:after加z-index:1，让它的层级低于z-index:2的标题元素。

修复后的CSS示例（第一种方法）：

#banner { 
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100vh; 
  background-image: url('pathto/image.jpg'); 
  background-size: cover;
  z-index: 0; /* 添加这行 */
}

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