CSS mask-image Özellik

Örnek

Bir görüntü için bir maske katmanı oluşturun:

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

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.

Tanım ve Kullanım

Özellik mask-image, bir öğe için maske katmanı olarak kullanılacak bir görüntüyü belirtir.

İpucu: CSS'deki doğrusal ve radyal degradeler de maske görüntüsü olarak kullanılabilir.

Varsayılan değer:	Yok
Miras:	Hayır
canlandırılabilir:	Hayır. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS3
JavaScript sözdizimi:	nesne .style.maskImage="url(star.svg)"

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

-webkit- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.

Property
mask-image	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

CSS Sözdizimi

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

Mülk değerleri

Value	Description
none	This is default
image	An image to use as the mask layer
url	An url reference to an image or an SVG <mask> element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Daha fazla örnek

Örnek

Doğrusal ve radyal degradelere sahip bir görüntü için farklı maske katmanları oluşturun:

.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));
}