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

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

Nilai

Nilai	Deskripsi
`none`	Menonaktifkan masking (nilai default).
`url()`	Path ke gambar mask (SVG, PNG).
`linear-gradient()`	Gradien linier sebagai mask.
`radial-gradient()`	Gradien radial sebagai mask.

Contoh . Menggunakan SVG sebagai Mask

Terapkan gambar SVG berbentuk hati sebagai mask pada gambar:

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

#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:

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

#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:

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

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

Lihat Juga

properti mask-position,
menentukan posisi mask relatif terhadap elemen
properti mask-size,
menentukan ukuran mask
properti mask-repeat,
menentukan pengulangan mask
properti mask-mode,
menentukan bagaimana mask berinteraksi dengan latar belakang
properti mask,
penyingkatan untuk semua properti masking