CSS mask-position özelliği

Önceki sayfa mask-origin
Sonraki sayfa mask-repeat

Tanım ve Kullanım

mask-position Özellik, kaplama görselinin başlangıç konumunu (kaplama konum alanına göre) ayarlar.

İpucu:Varsayılan olarak, kaplama görseli elementin sol üst köşesine yerleştirilir ve dikey ve yatay yönde tekrarlanır.

Örnek

Örnek 1

Kaplama katmanı görselinin konumunu merkeze ayarlayın:

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

Kişisel Deneyim

Örnek 2

Kaplama katmanı görselinin konumunu sağ alt köşeye ayarlayın:

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

Kişisel Deneyim

CSS Dilbilgisi

mask-position: değer;

Özellik Değeri

Değer	Açıklama
sol üst sol merkez sol alt sağ üst sağ merkez sağ alt merkez üst merkez merkez merkez alt	Sadece bir anahtar kelime belirtildiğinde, diğer değeri "merkez" olacaktır.
x% y%	İlk değer yatay konum, ikinci değer dikey konumdur. Sol üst köşe 0% 0%'dır. Sağ alt köşe 100% 100%'dir. Sadece bir değer belirtildiğinde, diğer değeri %50 olacaktır. Varsayılan değeri: 0% 0%
xpos ypos	İlk değer yatay konum, ikinci değer dikey konumdur. Sol üst köşe 0 0'dır. Birimler piksel (0px 0px) veya herhangi bir diğer CSS birimi olabilir. Sadece bir değer belirtildiğinde, diğer değeri %50 olacaktır. % ve konumu karışık olarak kullanılabilir.
initial	Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit	Bu özelliği ebeveyn elementinden miras alır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer:	0% 0%
Miraslık:	Hayır
Animasyon Yapımı:	Desteklenmiyor. Bakınız:Animasyonla İlgili Özellikler.
Sürüm:	CSS Masking Modülü 1
JavaScript Dilbilgisi:	object.style.maskPosition="100px center"