CSS -masker-herhaal eiendom

❮ Vorige Voltooi CSS- verwysing Volgende ❯

Voorbeeld

Gebruik mask-repeat: no-repeat;en 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;
}

Meer "Probeer dit self" voorbeelde hieronder.

Definisie en gebruik

Die mask-repeateienskap stel of/hoe 'n maskerbeeld herhaal sal word.

By verstek word 'n maskerbeeld beide vertikaal en horisontaal herhaal.

Standaard waarde:	herhaal
Geërf:	geen
Animateerbaar:	geen. Lees oor animeerbaar
Weergawe:	CSS3
JavaScript-sintaksis:	voorwerp .style.maskRepeat="no-repeat"

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.

Nommers gevolg deur -webkit- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.

Property
mask-repeat	4.0 -webkit-	79.0 -webkit-	53.0	3.1 -webkit-	15.0 -webkit-

CSS-sintaksis

Eiendomswaardes

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

Meer voorbeelde

Voorbeeld

Gebruik mask-repeat: round;en 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;
}

Voorbeeld

Gebruik mask-repeat: repeat-x;en 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;
}