<!DOCTYPE html>
<style>
.cross-fade-image1 {
display: inline-block;
width: 200px; height: 200px;
background: no-repeat center / contain;
background-image: -webkit-cross-fade( url(resources/background.png),url(resources/background.png), 50%);
}
.cross-fade-image2 {
display: inline-block;
width: 200px; height: 200px;
background: no-repeat center / contain;
background-image: -webkit-cross-fade( url(resources/blue-rect.svg),url(resources/svg-image.svg), 50%);
}
.cross-fade-image1-tile {
display: inline-block;
width: 200px; height: 200px;
border-radius: 10px;
background-image: -webkit-cross-fade( url(resources/background.png),url(resources/background.png), 50%);
}
.cross-fade-image2-tile {
display: inline-block;
width: 200px; height: 200px;
background: no-repeat center / contain;
border-radius: 10px;
background-image: -webkit-cross-fade( url(resources/blue-rect.svg),url(resources/svg-image.svg), 50%);
}
</style>
<div>
<div class="cross-fade-image1"></div>
<div class="cross-fade-image2"></div>
</div>
<div>
<div class="cross-fade-image1-tile"></div>
<div class="cross-fade-image2-tile"></div>
</div>