CSS mask-composite özelliği

Önceki sayfa mask-clip
Sonraki sayfa mask-image

Tanım ve Kullanım

mask-composite Özellik, mevcut örtü katmanının alttaki örtü katmanıyla kullandığı birleştirme işlemi belirler.

Örnek

Göster mask-composite Özelliklerin Farklı Değerleri:

.masked {
  genişlik: 200px;
  yükseklik: 200px;
  mask-repeat: bir kez tekrar etmez;
  mask-size: 100%;
  background: mavi;
  -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: ekle;
}
.mask2 {
  mask-composite: çıkart;
}
.mask3 {
  mask-composite: çakış;
}
.mask4 {
  mask-composite: dışarıda;
}

Kendi Kendine Deneyin

CSS Dilbilgisi

mask-composite: ekle|çıkart|çakış|dışarıda|ilk|miras;

Özellik Değeri

Değer	Açıklama
ekle	Kaynak örtü katmanı, hedef örtü katmanının üzerinde yer alır.
çıkart	Kaynak örtü katmanı, hedef örtü katmanı dışında yer alan kısmı içerir.
çakış	Kaynak örtü katmanı ile hedef örtü katmanı arasında çakışan kısımlar, hedef örtü katmanının yerine konur.
dışarıda	Kaynak örtü katmanı ile hedef örtü katmanı arasında çakışmayan alanlar birleştirilir.
ilk	Bu özelliği varsayılan değerine ayarlar. Görüş: ilk.
miras	Bu özelliği ebeveyn elemanından miras alır. Görüş: miras.

Teknik Ayrıntılar

Varsayılan Değer:	ekle
Miras Alanı:	Hayır
Animasyon Yapımı:	Desteklenmiyor. İçindekiler:Animasyon İle İlgili Özellikler.
Sürüm:	CSS Masking Modülü 1
JavaScript Dilbilgisi:	object.style.maskComposite="intersect"