7

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>

View on JSFiddle

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
sigmaxf
  • 7,998
  • 15
  • 65
  • 125
  • 1
    A few notes: To add to Temani Afif's answer (which worked for me!) be sure to not use any z-index on the mix-blend-mode elements as they will no longer display correctly. I have also found that pseudo elements will also not inherit blend modes. – SL20XX Jul 29 '18 at 23:47

1 Answers1

8

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 isolation is set.

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>

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>
doldt
  • 4,466
  • 3
  • 21
  • 36
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 2
    This does not make much sense to me, this way I could just ignore the isolate property and write this: h2 span:not(.isolate) { mix-blend-mode: difference; color: white; } – sigmaxf Apr 13 '18 at 00:13
  • @raphadko yes you can :) i simply explained how the isolation work [how i understand it] ... i didn't focus on the html, but i focused on how it should be used in order to work – Temani Afif Apr 13 '18 at 00:15
  • 4
    @raphadko the conclusion of this, is that if you already apply mix-blend-mode to parent element, you cannot remove it from child element using isolate – Temani Afif Apr 13 '18 at 00:17