CSS mix-blend-mode not working with text and background image

1.5k views Asked by At

In my new project, I want to use mix-blend-mode: difference for my logo (top center) but it is not working.

See project

In CSS, I used this:

.sitetitle-txt-inner span {
    mix-blend-mode: difference;
}

Where is the problem?

1

There are 1 answers

3
T J On

Your parent .sitetitle-txt-inner is empty and transparent.

Try adding different background colors for the <div> and <span> and you'll see blending is working.


Result of red and blue:

enter image description here