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