Properti mask-image

Properti mask-image memungkinkan Anda untuk menetapkan gambar yang akan digunakan sebagai mask untuk elemen. Mask menentukan bagian mana dari elemen yang akan terlihat dan mana yang akan tersembunyi. Sebagai mask, Anda dapat menggunakan SVG, gambar PNG, atau gradien.

Sintaks

cssselector {
  mask-image: none | <image> | <url>;
}

Nilai

Contoh . Menggunakan SVG sebagai Mask

Terapkan gambar SVG berbentuk hati sebagai mask pada gambar:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 300px;
  mask-repeat: no-repeat;
}

Результат:

Contoh . Menggunakan Gradien sebagai Mask

Terapkan gradien linier sebagai mask untuk elemen:

html<div id="elem"></div>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask-image: linear-gradient(to right, transparent, black);
}

Результат:

Contoh . Menggunakan Elemen SVG sebagai Mask

Buat mask menggunakan elemen SVG dan terapkan pada gambar:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  mask-image: url(#mask);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

Lihat Juga