Properti mask CSS

Definisi dan penggunaan

mask Atribut digunakan untuk menyembunyikan elemen melalui penutup atau potongan gambar (bagian atau seluruhnya).

mask Atribut adalah bentuk singkat dari atribut berikut:

Contoh

Contoh 1

Membuat lapisan penutup gambar:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Coba sendiri

Contoh 2

Menggunakan gradasi linear dan radial untuk membuat lapisan penutup gambar yang berbeda:

.mask1 {
  mask: linear-gradient(hitam, transparan);
}
.mask2 {
  mask: radial-gradient(circle, hitam 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, hitam 50%, rgba(0, 0, 0, 0.5) 50%);
}

Coba sendiri

Contoh 3

Menggunakan elemen <mask> SVG untuk membuat lapisan penutup gambar:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

Coba sendiri

Contoh 4

Menggunakan elemen <mask> SVG untuk membuat lapisan penutup gambar:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

Coba sendiri

CSS Syntax

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Nilai atribut

Nilai Deskripsi
mask-image Tentukan gambar yang digunakan sebagai lapisan penutup elemen. Nilai defaultnya adalah none.
mask-mode

Tentukan apakah gambar lapisan penutup dianggap sebagai penutup kecerahan atau penutup alpha.

Nilai defaultnya adalah match-source.
mask-repeat

Atur apakah dan bagaimana gambar penutup diulang.

Nilai defaultnya adalah repeat.
mask-position

Atur posisi awal gambar penutup (relatif terhadap area posisi penutup).

Nilai defaultnya adalah 0% 0%.
mask-clip

Tentukan area yang dipengaruhi gambar penutup.

Nilai defaultnya adalah border-box.
mask-origin

Tentukan posisi awal gambar lapisan penutup (area posisi penutup).

Nilai defaultnya adalah border-box.
mask-size

Tentukan ukuran gambar lapisan penutup.

Nilai defaultnya adalah auto.
mask-composite

Tentukan operasi komposit yang digunakan untuk lapisan penutup saat ini dan lapisan penutup di bawahnya.

Nilai defaultnya adalah add.
initial Atur atribut ini ke nilai default. Lihat: initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat: inherit.

Detil teknis

Nilai default: none match-source repeat 0% 0% border-box border-box auto add
Inheritance: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Properti yang berhubungan dengan animasi.
Versi: Modul Masking CSS Level 1
JavaScript Syntax: object.style.mask="url(star.svg)"

Dukungan peramban

Angka di tabel menunjukkan versi peramban pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Halaman terkait

Panduan：Penutup CSS

Referensi：Properti mask CSS

Referensi：Properti mask-clip CSS

Referensi：Properti mask-composite CSS

Referensi：Properti mask-image CSS

Referensi：Properti mask-mode CSS

Referensi：Properti mask-origin CSS

Referensi：Properti mask-position CSS

Referensi：Properti mask-repeat CSS

Referensi：Properti mask-size CSS

Referensi：Properti mask-type CSS