mix-blend-mode with white and blue

Question

Let's say I have a blue and white background. I want my text to be black when the background is white and then white when the background is blue.

I've tried:

mix-blend-mode: difference;

It works when it's over white (giving me black text). But it gives me yellow text otherwise.

Here's what I have now, which is close:

Answer 1

Unfortunately, mix-blend-mode doesn't really offer any options that will fit exactly what you are looking for.

difference: this subtracts the darker of the two colors from the lightest color.

So...if your background color is blue rgb(0,0,255); and your text color is white rgb(255,255,255); what is left is yellow rgb(255,255,0);

So, if we use yellow text..we get white text on a blue background and a blue background on white...it's not black but it's the best I can do.

JSFiddle Demo

body {
  background: rgb(0, 0, 255);
  overflow: hidden;
}
body::before {
  content: 'o';
  font: bold 800px'Times', 'Times New Roman';
  color: white;
  position: absolute;
  left: -.25em;
  top: -.45em;
}
h1 {
  font-size: 40px;
  margin: 3em -3em 0 1em;
  mix-blend-mode: difference;
  color: rgb(255, 255, 0);
}

<h1>Welcome to the fiddle</h1>

Hat-tip to Mr Lister for the starter fiddle.

Answer 2

This will get you closer to what you want to do.....

    <style>
        .teaser {
        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 1em;
        max-width: 300px;
        overflow: hidden;
        position: relative;
    }
    .teaser:before, .teaser:after {
        content: '';
        display: block;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 300ms ease-out;
    }
    .teaser:before {
        z-index: 1;
        pointer-events: none;
    }
    @supports (mix-blend-mode: difference) {
        .teaser:before {
            background-color: white;
            mix-blend-mode: difference;
        }
    }
    .teaser:after {
        background-color: red;
        z-index: -1;
    }
    @supports (mix-blend-mode: difference) {
        .teaser:after {
            background-color: cyan;
        }
    }

    *, *:after, *:before {
        box-sizing: border-box;
    }

    body {
        margin: 1em;
    }
    </style>
    <div class="teaser">
        <h3>blend-mode with pseudos</h3>
        <p>Deleniti atque error quidem eaque eligendi ad, pariatur minima quisquam omnis veniam, sint voluptas, a ipsam illum debitis. Voluptatem esse, consectetur qui.Deleniti atque error quidem eaque eligendi ad, pariatur minima quisquam omnis veniam, sint voluptas, a ipsam illum debitis. </p>
    </div>

https://codepen.io/anon/pen/VqKbzK