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

Question

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

我的例子不起作用 如何使它工作？

＆＃13;

＆＃13;

.bg-red {
  background: red;
}

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

.isolate {
  isolation: isolate;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

View on JSFiddle

Answer 1

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

以下是在h2上应用背景的示例，内部有很多span。我们对它们应用mix-blend-mode，我们将不需要的一个包装在我们应用isolation的另一个包装器中：

＆＃13;

＆＃13;

h2 {
  background: red;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但如果你在h2上申请mix-blend-mode，你就无法隔离其任何内容：

＆＃13;

＆＃13;

.red {
  background: red;
}

h2 {
  mix-blend-mode: difference;
}

h2 span {
  color: white;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;