SVG v. PNG: CSS Masking

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<h4>SVG Backgorund</h4>
<strong></strong>
<h4>SVG Masking</h4>
<div></div>
<h4>PNG Masking</h4>
<span></span>
<pre id="debug"></pre>

CSS

div {
    background-color: red;
	-webkit-mask: url('http://stilllive.net/sprite.svg');
    -webkit-mask-size: cover;
    width: 50px;
    height: 50px;
    display: block;
}
strong {
    width: 50px;
    height: 50px;
    display: block;
    background: url('http://stilllive.net/sprite.svg');
}
span {
    background-color: red;
	-webkit-mask: url('http://stilllive.net/sprite.png');
    -webkit-mask-size: 1400%;
    width: 50px;
    height: 50px;
    display: block;
}

JavaScript

document.getElementById('debug').innerHTML = document.body.parentNode.className;