CSS mask-repeat özelliği

Önceki sayfa mask-position
Sonraki sayfa mask-size

Tanım ve Kullanım

mask-repeat Özellik, maska görselinin nasıl/nerede tekrar edeceğini ayarlar.

Varsayılan olarak, maska görseli dikey ve yatay yönde her iki yönde de tekrar eder.

Örnek

Örnek 1

Kullanım mask-repeat: no-repeat; ve mask-repeat: repeat;:

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

Deneyin

Örnek 2

Kullanım mask-repeat: round; ve mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Deneyin

Örnek 3

Kullanım mask-repeat: repeat-x; ve mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Deneyin

CSS Dilbilgisi

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Özellik Değeri

Değer	Açıklama
repeat	Maska görseli dikey ve yatay yönde her iki yönde de tekrar eder. Son görsel uygun değilse kesilir. Bu varsayılan değerdir.
repeat-x	Maska görseli sadece yatay yönde tekrar eder.
repeat-y	Maska görseli sadece dikey yönde tekrar eder.
space	Maska görseli mümkün olduğunca fazla tekrar eder ve kesilir. İlk ve son görsel sırasıyla elementin her iki yanına sabitlenir, görsel arasındaki beyaz alan dengeli olarak dağıtılır.
round	Maska görseli tekrar eder ve boşluk doldurmak için sıkıştırılır veya uzatılır (boşluk olmaz).
no-repeat	Maska görseli tekrar etmez. Görsel sadece bir kez gösterilir.
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:	repeat
Miras Özelliği:	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.maskRepeat="no-repeat"