JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background"><div id="inner"></div></div>
<svg>
    <filter id="invert" x="0" y="0">
        <feComponentTransfer>
            <feFuncR type="table" tableValues="1 -20"/>
            <feFuncG type="table" tableValues="1 -20"/>
            <feFuncB type="table" tableValues="1 -20"/>
        </feComponentTransfer>
    </filter>
</svg>

CSS

* {
    padding: 0;
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%;
    display: block;
}
#background {
    background: url(http://i.cubeupload.com/8oOfdl.png) black;
    width: 100%;
    height: 100%;
}
#inner {
    -webkit-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: url('#invert');
    filter: progid:DXImageTransform.Microsoft.BasicImage(xray=1);
    background: url(http://i.cubeupload.com/8oOfdl.png) black;
    width: 100%;
    height: 50%;
}