如何组合使用CSS的mix-blend-mode与isolation？特定文本混色问题求解

我明白你的需求啦——想让红色背景上的h2里，大部分文字和背景用difference模式混合，唯独span里的文字保持原样不混合，但现有代码没达到效果对吧？

先说说你原来代码的问题：你把mix-blend-mode加在了外层的.blend容器上，这会让整个容器（包括里面的h2和所有子元素）都和红色背景发生混合。span的isolation是在这个容器内部设置的，没法打破容器本身和背景已经产生的混合效果，所以span里的文字还是会被混合影响。

下面给你两种可行的修正方案：

方案一：用isolation创建独立堆叠上下文（推荐） #

把混合模式直接应用到h2上，然后给span设置isolation: isolate并调整display属性，让它创建独立的堆叠上下文，脱离父元素的混合效果：

.bg-red { 
  background: red; 
  padding: 1rem; /* 加内边距方便观察效果 */
}
h2 { 
  mix-blend-mode: difference; 
  color: white; 
  margin: 0;
}
.isolate { 
  isolation: isolate; 
  display: inline-block; /* inline元素无法创建堆叠上下文，必须改成inline-block或block */
}

<div class="bg-red">
  <h2>This text should <span class="isolate">(This one shouldn't)</span> be blended</h2>
</div>

原理： #

• h2的mix-blend-mode: difference让它的文字和父元素的红色背景混合，产生对比色效果；
• span的isolation: isolate会创建一个全新的堆叠上下文，这个上下文里的内容不会参与外部的混合，再配合display: inline-block确保isolation生效，所以span里的文字会保持原本的白色，不受混合影响。

方案二：直接覆盖混合模式 #

如果不需要严格的堆叠上下文隔离，也可以直接给span设置mix-blend-mode: normal，覆盖父元素继承来的混合模式：

.bg-red { 
  background: red; 
  padding: 1rem;
}
h2 { 
  mix-blend-mode: difference; 
  color: white; 
  margin: 0;
}
.isolate { 
  mix-blend-mode: normal;
}

HTML结构和方案一一样，这样span的文字会以正常模式叠加在红色背景上，保持白色，而h2其他文字依然是混合后的颜色。

这两种方法都能实现你要的效果，方案一更稳妥，尤其是当span需要添加背景或其他样式时，不会出现意外的混合问题。

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