CSS maske tekrarı Özellik
Örnek
kullanma mask-repeat: no-repeat;
ve mask-repeat:
repeat;
:
.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;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik mask-repeat
, bir maske görüntüsünün tekrarlanıp tekrarlanmayacağını/nasıl olacağını belirler.
Varsayılan olarak, bir maske görüntüsü hem dikey hem de yatay olarak tekrarlanır.
Varsayılan değer: | tekrarlamak |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.maskRepeat="tekrar yok" |
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-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
CSS Sözdizimi
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
repeat-x | The mask image is repeated only horizontally |
repeat-y | The mask image is repeated only vertically |
space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
no-repeat | The mask image is not repeated. The image will only be shown once |
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
kullanma mask-repeat: round;
ve mask-repeat:
space;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
Örnek
kullanma mask-repeat: repeat-x;
ve mask-repeat:
repeat-y;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
İlgili Sayfalar
CSS referansı: maske görüntüsü özelliği
CSS referansı: maske modu özelliği
CSS referansı: mask-origin özelliği
CSS referansı: maske konumu özelliği
CSS referansı: maske boyutu özelliği
CSS eğitimi: CSS Maskeleme