<img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-composite/field.jpg" alt="">
body {
background-color: #111;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
margin: 20px auto;
display: block;
width: 100%;
height: 400px;
-webkit-mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-composite/mask-image.png), url(splatter.png);
mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-composite/mask-image.png), url(splatter.png);
-webkit-mask-position: center center, bottom right;
mask-position: center center, bottom right;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-size: 350px 350px, 350px 350px;
mask-size: 350px 350px, 350px 350px;
/* using the non-standard keywords because standard ones are nor implemented yet */
-webkit-mask-composite: XOR;
mask-composite: XOR;
}