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