如何使用混合混合模式和隔离的CSS组合？ [英] How to use CSS combination of mix-blend-mode and isolation?

问题描述

我有一个红色背景的父元素。我希望一个h2元素仅将一些单词与背景混合，而其他单词则在​​span标记内，不。

I have a parent element with a red background. I want an h2 element to blend just some words with the background, and other words, inside a span tag, no.

下面的示例不起作用。

如何使其工作？

My example below is not working.
How to make it work?

.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上查看

推荐答案

为了使其正常工作，您需要在之前指定隔离，然后应用 mix-blend-mode 。因此，在背景和要应用 mix-blend-mode 的文本之间，您需要有一个包装，其中隔离

In order to make it working you need to specify the isolation before applying the mix-blend-mode. So between the background and the text on where you will apply mix-blend-mode you need to have a wrapper where isotlation is set.

在此示例中，背景应用于 h2 ，并且内部有很多 span 。我们在它们上应用 mix-blend-mode ，并用另一个包装器包装不需要的包装，在其中应用 isolation ：

Here is an example where the background is applied on the h2 and inside we have many span. We apply mix-blend-mode on them and we wrap the non-needed one with another wrapper where we apply 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>

您在H2上应用 mix-blend-mode 您将无法隔离其任何内容：

But if you apply mix-blend-mode on the h2 you won't be able to isolate any of its content:

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

这篇关于如何使用混合混合模式和隔离的CSS组合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！