Mix-Blend-Mode Difference

Question

I've tried to add the mix-blend-mode: difference; to „span“ but it doesn't work.

This solution works: I add the blend mode instead „.caption span“ to „.caption“. But what I really need, is to put span in a div.

Any ideas why? Thank you!

 .caption { position: absolute; top: 10px; left: 10px; z-index: 99; font-size: 62px; } .caption span { color: #fff; mix-blend-mode: difference; } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; } .background-image img { object-fit: cover; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } 

 <div class="row"> <div class="row-inner"> <div class="caption"> <span class="test">Headline</span> </div> </div> <div class="background-image"> <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"> </div> </div> 

Answer 1

In my knowledge, the only way is to use the mix-blend-mode is by placing <span> and <img> in the same <div>

working sample for you.

 span { color: #fff; mix-blend-mode: difference; position: absolute; top: 10px; left: 10px; z-index: 99; font-size: 62px; } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; } .background-image img { object-fit: cover; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } 

 <div class="row"> <div class="background-image"> <span class="test">Headline</span> <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"> </div> </div> 

Another way is to set the background of the wrapper div to the image and it will work.

I hope this was helpful for you.

The values you can use with mix-blend-mode are as per this link

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;