Atribut mask-composite CSS

Referensi: Halaman sebelumnya
Halaman berikutnya mask-image

Definisi dan Penggunaan

mask-composite Atribut menentukan operasi penggabungan yang digunakan antara lapisan penutup saat ini dan lapisan penutup di bawahnya.

Contoh

Tampilkan mask-composite Nilai yang berbeda dari atribut:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

Coba sendiri

Syntax CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Nilai atribut

Nilai	Deskripsi
add	Lapisan penutup asal ditempatkan di atas lapisan penutup tujuan.
subtract	Bagian yang ditempatkan di luar lapisan penutup tujuan dari lapisan penutup asal.
intersect	Bagian yang terpadan antara lapisan penutup asal dan lapisan penutup tujuan menggantikan lapisan penutup tujuan.
exclude	Area yang tidak terpadan antara lapisan penutup asal dan lapisan penutup tujuan digabungkan.
initial	Atur atribut ini ke nilai defaultnya. Lihat initial。
inherit	Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil Teknologi

Nilai Default:	add
Inheritance:	Tidak
Pembuatan animasi:	Tidak didukung. Lihat:Properti yang berhubungan dengan animasi。
Versi:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskComposite="intersect"