html - 如何使用混合混合模式和隔离的CSS组合？

Question

我有一个带有红色背景的父元素。我想要一个 h2 元素将一些单词与背景混合，换句话说，在 span 标签内，不。

我下面的示例不起作用。
如何让它发挥作用？

.bg-red {
  background: red;
}

.blend {
  mix-blend-mode: difference;
  color: white;
}

.isolate {
  isolation: isolate;
}

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

在 JSFiddle 上查看

Answer 1

为了使其正常工作，您需要在应用mix-blend-mode. 因此，在您将应用的背景和文本之间，mix-blend-mode您需要设置一个包装器isolation。

这是一个示例，其中背景应用在h2我们有很多内部和内部span。我们mix-blend-mode对它们进行应用，并在我们应用的地方用另一个包装器包装不需要的包装器isolation：

h2 {
  background: red;
}

h2 span {
  mix-blend-mode: difference;
  color: white;
}

.isolate {
  isolation: isolate;
  display: inline-block;
}

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

但是如果你mix-blend-mode在 h2 上申请，你将无法隔离它的任何内容：

.red {
  background: red;
}

h2 {
  mix-blend-mode: difference;
}

h2 span {
  color: white;
}

.isolate {
  isolation: isolate;
  display: inline-block;
}

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