CSS mask özelliği

Tanım ve Kullanım

mask Özellik, elemanı gölgelik veya kesme yoluyla (kısmen veya tamamen) gizlemek için kullanılır.

mask Özellikler, aşağıdaki özelliklerin kısaltma biçimidir:

Örnek

Örnek 1

Görsel için gölgelik oluşturma:

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

Kişisel Olarak Deneyin

Örnek 2

Görsel için farklı gölgelikler oluşturmak için lineer ve dairesel gradyan kullanma:

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

Kişisel Olarak Deneyin

Örnek 3

SVG <mask> element'i ile görsel için gölgelik oluşturma:

<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>

Kişisel Olarak Deneyin

Örnek 4

SVG <mask> element'i ile görsel için gölgelik oluşturma:

<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>

Kişisel Olarak Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
mask-image Element maskelenme katmanı olarak kullanılacak görseli belirtir. Varsayılan değeri none'dir.
mask-mode

Maskelenme katmanı görselinin parlaklık maskesi olarak mı yoksa alpha maskesi olarak mı görülmesi gerektiğini belirtir.

Varsayılan değeri match-source'tur.
mask-repeat

Maskelenme görselinin tekrar etme durumunu/nasıl tekrar edileceğini ayarlar.

Varsayılan değeri repeat'tir.
mask-position

Maskelenme görselinin başlangıç konumunu (maskelenme konum alanına göre) ayarlar.

Varsayılan değeri 0% 0%'dır.
mask-clip

Maskelenme görselinin etkilediği alanı belirtir.

Varsayılan değeri border-box'tur.
mask-origin

Maskelenme katmanı görselinin başlangıç konumunu (maskelenme konum alanı) belirtir.

Varsayılan değeri border-box'tur.
mask-size

Maskelenme katmanı görselinin boyutunu belirtir.

Varsayılan değeri auto'dur.
mask-composite

Mevcut maskelenme katmanı ile alt maskelenme katmanı arasında kullanılan bileşim işlemini belirtir.

Varsayılan değeri add'dır.
initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği, ebeveyn elementinden devralır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: none match-source repeat 0% 0% border-box border-box auto add
Devralabilirlik: Hayır
Animasyon Yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS Masking Modülü 1
JavaScript Dilbilgisi: object.style.mask="url(star.svg)"

Tarayıcı Desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

İlgili sayfalar

Eğitim:CSS gölgeleme

Kaynakça：CSS mask özelliği

Kaynakça：CSS mask-clip özelliği

Kaynakça：CSS mask-composite özelliği

Kaynakça：CSS mask-image özelliği

Kaynakça：CSS mask-mode özelliği

Kaynakça：CSS mask-origin özelliği

Kaynakça：CSS mask-position özelliği

Kaynakça：CSS mask-repeat özelliği

Kaynakça：CSS mask-size özelliği

Kaynakça：CSS mask-type özelliği