Proprietà CSS mask-repeat

❮ Precedente Riferimento CSS completo Avanti ❯

Esempio

Usando mask-repeat: no-repeat;e 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;
}

Altri esempi "Provalo da solo" di seguito.

Definizione e utilizzo

La mask-repeatproprietà imposta se/come verrà ripetuta un'immagine della maschera.

Per impostazione predefinita, un'immagine maschera viene ripetuta sia verticalmente che orizzontalmente.

Valore di default:	ripetere
Ereditato:	no
Animabile:	no. Leggi su animabile
Versione:	CSS3
sintassi JavaScript:	oggetto .style.maskRepeat="no-repeat"

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.

I numeri seguiti da -webkit- specificano la prima versione che ha funzionato con un prefisso.

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

Sintassi CSS

Valori di proprietà

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

Altri esempi

Esempio

Usando mask-repeat: round;e 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;
}

Esempio

Usando mask-repeat: repeat-x;e 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;
}