CSS maske konumu Özellik

Örnek

Maske katmanı görüntüsünün konumunu merkeze ayarlayın:

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

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

Tanım ve Kullanım

Özellik mask-position, bir maske görüntüsünün başlangıç konumunu ayarlar (maske konumu alanına göre).

İpucu: Varsayılan olarak, bir öğenin sol üst köşesine bir maske görüntüsü yerleştirilir ve hem dikey hem de yatay olarak tekrarlanır.

Varsayılan değer:	0% 0%
Miras:	Hayır
canlandırılabilir:	Hayır. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS3
JavaScript sözdizimi:	nesne .style.maskPosition="100 piksel merkez"

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-position	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

CSS Sözdizimi

mask-position: value;

Mülk değerleri

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit