<div class="container">
<h1>Browser support: Firefox and Webkit browsers (limited)</h1>
<article>
<h2>The mask-image property</h2>
<img class="mask-img example-mask" src="https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/colorful-artwork.jpg" alt="Masked image">
</article>
<article>
<h2>The mask-image property with combined masks</h2>
<img class="mask-img example-mask combined-mask" src="https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/colorful-artwork.jpg" alt="Masked image">
</article>
<article>
<h2>The mask-repeat property</h2>
<img class="mask-img-repeat" src="https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/colorful-artwork.jpg" alt="Masked image.">
</article>
</div>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
color: #50c6db;
}
.container {
max-width: 90%;
margin: 0 auto;
text-align: center;
}
article {
margin: 100px 0;
border: 3px solid #ccc;
}
.mask-img {
display: block;
max-width: 50%;
height: auto;
margin: 0 auto;
}
.example-mask {
mask-image: url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg);
webkit-mask-image: url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg);
mask-mode: alpha;
webkit-mask-mode: alpha;
mask-repeat: no-repeat;
webkit-mask-repeat: no-repeat;
mask-size: 200px;
webkit-mask-size: 200px;
mask-position: center;
webkit-mask-position: center;
}
.combined-mask {
mask-image: url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/arrow-01.svg), url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg);
webkit-mask-image: url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/arrow-01.svg), url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg);
}
.mask-img-repeat {
margin: auto;
display: block;
max-width: 100%;
height: 550px;
mask-image: url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg);
webkit-mask-image: url(https://abbeyjfitzgerald.com/wp-content/uploads/2017/10/browser-icon-01.svg);
mask-repeat: space;
webkit-mask-repeat: space;
mask-size: 80px 80px;
webkit-mask-size: 80px 80px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.