<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;
}








External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.