如何使用混合模式和隔离的 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您需要在其中isotlation设置一个包装器。

这是一个示例，其中背景应用于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>