Sifat mask-image

Sifat mask-image membolehkan anda menetapkan imej yang akan digunakan sebagai topeng untuk unsur. Topeng menentukan bahagian unsur mana yang akan kelihatan dan mana yang akan disembunyikan. SVG, imej PNG atau gradien boleh digunakan sebagai topeng.

Sintaks

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

Nilai

Nilai	Keterangan
`none`	Mematikan penutupan (nilai lalai).
`url()`	Laluan ke imej topeng (SVG, PNG).
`linear-gradient()`	Gradien linear sebagai topeng.
`radial-gradient()`	Gradien jejari sebagai topeng.

Contoh . Menggunakan SVG sebagai Topeng

Letakkan imej SVG bentuk hati sebagai topeng 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 Topeng

Gunakan gradien linear sebagai topeng untuk unsur:

<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 Unsur SVG sebagai Topeng

Buat topeng menggunakan unsur SVG dan gunakannya 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

sifat mask-position,
menentukan kedudukan topeng relatif kepada unsur
sifat mask-size,
menentukan saiz topeng
sifat mask-repeat,
menentukan pengulangan topeng
sifat mask-mode,
menentukan bagaimana topeng berinteraksi dengan latar belakang
sifat mask,
penyingkatan untuk semua sifat penutupan