CSS mask-image özelliği

Önceki Sayfa mask-composite
Sonraki Sayfa mask-mode

Tanım ve Kullanım

mask-image Özellik, elementin kaplama katmanı olarak kullanılan görseli belirler.

İpucu:CSS'teki doğrusal ve merkezi gradasyonlar, kaplama görseller olarak da kullanılabilir.

Örnek

Örnek 1

Görsel için kaplama katmanı oluşturun:

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

Kişisel olarak deneyin

Örnek 2

Farklı kaplama katmanları oluşturmak için doğrusal ve merkezi gradasyon kullanın:

.mask1 {
  -webkit-mask-image: doğrusal-gradasyon(karlık, şeffaf);
  mask-image: doğrusal-gradasyon(karlık, şeffaf);
}
.mask2 {
  -webkit-mask-image: dairesel-gradasyon(karlık 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: dairesel-gradasyon(karlık 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: merkezi-radyal-gradasyon(karlık 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: merkezi-radyal-gradasyon(karlık 50%, rgba(0, 0, 0, 0.5));
}

Kişisel olarak deneyin

Örnek 3

Görsel için kapak tabakası oluşturmak için SVG <mask> elemanı kullanın:

<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

Görsel için başka bir kapak tabakası oluşturmak için SVG <mask> elemanı kullanın:

<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: none|image|url()|initial|inherit;

Özellik Değeri

Değer	Açıklama
none	Varsayılan Değer. Kapak görseli kullanılmaz.
image	Kapak tabakası olarak kullanılan görsel.
url()	Görsel veya SVG <mask> elemanının URL referansı.
initial	Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit	Bu özelliği ebeveyn elemanından miras alır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer:	none
Miraslık:	Hayır
Animasyon Yapımı:	Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS Masking Modülü 1
JavaScript Dilbilgisi:	object.style.maskImage="url(star.svg)"