<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>

<span>test</span>
div {
    position:absolute;
    height:200px
}

/* A white bottom layer */
#whitebg { 
    background: white; 
    width:400px; 
    z-index:1
}

/* A black layer on top of the white bottom layer */
#blackbg { 
    background: black; 
    width:100px; 
    z-index:2
}

/* Some white text on top with blend-mode set to 'difference' */
span {
    position:absolute; 
    font-family: Arial, Helvetica; 
    font-size: 100px; 
    mix-blend-mode: difference;
    color: white;
    z-index: 3
}

/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered { 
    background-color: red;
    mix-blend-mode: screen;
    width:400px; 
    z-index:4
}
// This is part of a Larger Project. Details may be found here: https://codepen.io/write/black-white-open-close

/* Credit: http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color */

// This is an example used in my upcoming video about how i did this: 

// Recreating An Image using HTML5 & CSS3 (no JavaScript) 

// Video here: https://www.youtube.com/watch?v=iYrF_7SKpKU

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.