CSS 伪元素设置mix-blend-mode不生效，如何不影响内部文本实现混合模式

你遇到的mix-blend-mode完全失效的情况，本质是层叠上下文的隔离机制导致的，和你原本“用伪元素隔离文本和混合层”的思路方向没有冲突，纯粹是层级设置踩了两个常见的实现坑：

失效点1：独立层叠上下文阻断了混合的交互范围 #

mix-blend-mode的生效规则是：仅会和同一层叠上下文内、位于元素下方的所有内容做像素级混合。
你给.blue-column同时设置了position: absolute和z-index: 224，这两个属性组合会直接让.blue-column成为一个完全独立的层叠上下文根节点。节点内部的所有元素（包括伪元素）的层叠关系，都被封在这个容器的边界里，永远无法和容器外部的header图片、底层背景产生交互。
哪怕你给内部的::before伪元素设了z-index: -1，这个负层级也只是在.blue-column这个封闭容器内部排到最底层，根本穿不过父元素的层叠边界，自然没法和下面的内容做混合。

你可以对比下自己代码里能生效的.header::after：因为.header没有设置z-index、没有创建独立层叠上下文，所以它的伪元素可以正常和同层的img做混合，和.blue-column的失效情况刚好形成对照。

失效点2：负z-index的伪元素无法实现“隔离文本”的目标 #

你原本想把伪元素压到文本下面，但用z-index: -1的方式，会把伪元素压到父元素自身的背景层下面，加上父元素本身是透明的，伪元素既接触不到外部的背景内容，也没法和上层的文本形成清晰的层级隔离。 #

整体保留你“用伪元素独立承载混合层、把文本和混合层做层级隔离”的核心思路，只调整层叠逻辑，修正混合生效的前提条件：

调整步骤 #

• 保留.blue-column的定位、文本颜色、内边距这些基础样式，去掉原来直接给.blue-column设z-index: 224的写法，避免它形成阻断混合的封闭层叠上下文
• 调整::before伪元素的层级：去掉z-index: -1，给伪元素设置正常的z-index: 1，让混合层在容器内排到所有内容的下方
• 给.blue-column内部的文本、logo块单独设置层级：加上position: relative; z-index: 2，让文本始终排在混合层的上方，完全不会被混合效果影响
• 保证.blue-column本身不设置非透明背景、不开启isolation: isolate，避免再次创建隔离的层叠上下文

修正后的核心CSS代码 #

/* 调整.blue-column的基础属性，移除会阻断混合的z-index设置 */
.blue-column {
  --left-offset: 50px;
  color: white;
  position: absolute;
  left: var(--left-offset);
  top: var(--border-offset);
  right: calc(100% - (var(--left-offset) + 200px));
  bottom: -1px;
  padding-left: 15px;
  padding-right: 15px;
}

/* 修正伪元素的层叠设置 */
div.blue-column::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  content: '';
  background: linear-gradient(rgba(17, 64, 114, 1), rgba(22, 98, 173, 1));
  mix-blend-mode: multiply;
  z-index: 1; /* 替换原来的z-index: -1 */
}

/* 给内部文本和logo单独抬高层级，实现完全隔离 */
.blue-column .logo,
.blue-column .column-content {
  position: relative;
  z-index: 2;
}

• 不要随便给承载混合层的父元素加非透明背景、isolation: isolate属性，这两个操作都会直接创建独立层叠上下文，让mix-blend-mode瞬间失效
• 实现“文本不受混合影响”不需要把混合层压到父元素的负z-index层，只要保证文本的层级比混合层高，且不给文本自身加混合模式属性即可
• 如果需要整列的z-index比其他内容高，可以把z-index设置在混合层的伪元素上，不要把z-index设在整个.blue-column容器上，避免形成封闭的层叠隔离

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