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;