Penyamaran CSS
Dengan CSS masking Anda membuat layer mask untuk ditempatkan di atas elemen untuk menyembunyikan sebagian atau seluruhnya bagian dari elemen.
Properti gambar topeng CSS
Properti CSS mask-imagemenentukan gambar lapisan topeng.
Gambar lapisan topeng dapat berupa gambar PNG, gambar SVG, gradien CSS , atau elemen <mask> SVG .
Dukungan Peramban
Catatan: Sebagian besar browser hanya memiliki dukungan parsial untuk penyembunyian CSS. Anda perlu menggunakan awalan -webkit- selain properti standar di sebagian besar browser.
Angka-angka dalam tabel di bawah menentukan versi browser pertama yang sepenuhnya mendukung properti. Angka diikuti oleh -webkit- menentukan versi pertama yang berfungsi dengan awalan.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Gunakan Gambar sebagai Layer Mask
Untuk menggunakan gambar PNG atau SVG sebagai lapisan topeng, gunakan nilai url() untuk meneruskan gambar lapisan topeng.
Gambar topeng harus memiliki area transparan atau semi-transparan. Hitam menunjukkan sepenuhnya transparan.
Berikut adalah gambar topeng (gambar PNG) yang akan kita gunakan:
Berikut adalah gambar dari Cinque Terre, di Italia:
Sekarang, kita menerapkan gambar topeng (gambar PNG di atas) sebagai lapisan topeng untuk gambar dari Cinque Terre, Italia:
Contoh
Berikut adalah kode sumbernya:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Contoh Dijelaskan
Properti mask-imagemenentukan gambar yang akan digunakan sebagai lapisan topeng untuk suatu elemen.
Properti mask-repeatmenentukan apakah atau bagaimana gambar topeng akan diulang. Nilai tersebut no-repeat
menunjukkan bahwa gambar topeng tidak akan berulang (gambar topeng hanya akan ditampilkan satu kali).
Contoh lain
Jika kita menghilangkan mask-repeatproperti, gambar topeng akan diulang di seluruh gambar dari Cinque Terre, Italia:
Contoh
Berikut adalah kode sumbernya:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Gunakan Gradien sebagai Layer Mask
Gradien linier dan radial CSS juga dapat digunakan sebagai gambar topeng.
Contoh Gradien Linier
Di sini, kami menggunakan gradien linier sebagai lapisan topeng untuk gambar kami. Gradien linier ini bergerak dari atas (hitam) ke bawah (transparan):
Contoh
Gunakan gradien linier sebagai lapisan topeng:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Di sini, kami menggunakan gradien linier bersama dengan masking teks sebagai lapisan topeng untuk gambar kami:
Cinque Terre adalah daerah pesisir di Liguria, di barat laut Italia. Itu terletak di barat Provinsi La Spezia, dan terdiri dari lima desa: Monterosso al Mare, Vernazza, Corniglia, Manarola, dan Riomaggiore.
Cinque Terre adalah daerah pesisir di Liguria, di barat laut Italia. Itu terletak di barat Provinsi La Spezia, dan terdiri dari lima desa: Monterosso al Mare, Vernazza, Corniglia, Manarola, dan Riomaggiore.
Cinque Terre adalah daerah pesisir di Liguria, di barat laut Italia. Itu terletak di barat Provinsi La Spezia, dan terdiri dari lima desa: Monterosso al Mare, Vernazza, Corniglia, Manarola, dan Riomaggiore.
Contoh
Gunakan gradien linier bersama dengan masking teks sebagai lapisan topeng:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Contoh Gradien Radial
Di sini, kami menggunakan gradien radial (berbentuk lingkaran) sebagai lapisan topeng untuk gambar kami:
Contoh
Gunakan gradien radial sebagai lapisan topeng (lingkaran):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Di sini, kita menggunakan radial-gradient (berbentuk elips) sebagai layer mask untuk gambar kita:
Contoh
Gunakan gradien radial lain sebagai lapisan topeng (elips):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
Gunakan SVG sebagai Layer Mask
Elemen SVG <mask>dapat digunakan di dalam grafik SVG untuk membuat efek masking.
Di sini, kami menggunakan elemen SVG <mask>untuk membuat lapisan topeng yang berbeda untuk gambar kami:
Contoh
Lapisan topeng SVG (dibentuk sebagai segitiga):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Contoh
Lapisan topeng SVG (dibentuk sebagai bintang):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Contoh
Lapisan topeng SVG (dibentuk sebagai lingkaran):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
Properti Penyembunyian CSS
Tabel berikut mencantumkan semua properti masking CSS:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |