<html>
<style>
div
{
    width: 200px;
    height: 100px;
}

.crossfade1
{
    background-image: cross-fade(url(resources/green-10.png), url(resources/green-10.png), 50%);
}

.crossfade2
{
    background-image: cross-fade(url(resources/green-10.png), url(resources/green-10-2.png), 50%);
}
</style>
<!-- All rectangles should look the same-->
<div class="crossfade1"></div>
<div class="crossfade2"></div>
<div style="background-color: black"><div class="crossfade2"></div></div>
</html>