Properti mask-image CSS

Halaman sebelumnya mask-composite
Halaman berikutnya mask-mode

Definisi dan penggunaan

mask-image Atribut digunakan untuk menentukan gambar yang digunakan sebagai penutup elemen.

Petunjuk:Gradasi linear dan radial di CSS juga dapat digunakan sebagai gambar penutup.

Contoh

Contoh 1

Membuat lapisan penutup gambar:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Coba sendiri

Contoh 2

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

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.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%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

Coba sendiri

Contoh 3

Gunakan elemen SVG <mask> untuk membuat lapisan masker untuk 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

Gunakan elemen SVG <mask> untuk membuat lapisan masker lain untuk 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

Sintaksis CSS

mask-image: none|image|url()|initial|inherit;

Nilai atribut

Nilai	Deskripsi
none	Nilai Default. Tidak menggunakan gambar masker.
image	Digunakan sebagai gambar yang digunakan sebagai masker.
url()	Referensi URL untuk elemen gambar atau SVG <mask>.
initial	Atur atribut ini ke nilai default. Lihat initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil Teknis

Nilai Default:	none
Inheritance:	Tidak
Pembuatan animasi:	Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi:	Modul Masking CSS Level 1
Sintaksis JavaScript:	object.style.maskImage="url(star.svg)"