108 of 313 menu

Egenskapen mask-repeat

Egenskapen mask-repeat anger hur en mask ska upprepas om dess dimensioner är mindre än elementets. Fungerar på samma sätt som background-repeat, men appliceras på masker.

Syntax

selektor {
	mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Värden

Värde	Beskrivning
`repeat`	Masken upprepas längs båda axlarna (standard).
`no-repeat`	Masken upprepas inte.
`repeat-x`	Masken upprepas endast horisontellt.
`repeat-y`	Masken upprepas endast vertikalt.
`space`	Masken upprepas med lika stort mellanrum.
`round`	Masken skalas för att fylla ut jämnt.

Exempel . Utan upprepning (no-repeat)

Ett enda hjärta i mitten utan upprepning:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 100px;
	mask-repeat: no-repeat;
}

:

Exempel . Upprepning horisontellt (repeat-x)

Hjärtana upprepas endast horisontellt:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: left center;
	mask-size: 50px;
	mask-repeat: repeat-x;
}

:

Exempel . Upprepning vertikalt (repeat-y)

Hjärtana upprepas endast vertikalt:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center top;
	mask-size: 50px;
	mask-repeat: repeat-y;
}

:

Exempel . Upprepning med mellanrum (space)

Hjärtana är jämnt fördelade med mellanrum:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-size: 80px;
	mask-repeat: space;
}

:

Exempel . Skalbar upprepning (round)

Hjärtana skalas för att fylla ut jämnt:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-size: 80px;
	mask-repeat: round;
}

:

Se även

egenskapen mask-size,
bestämmer maskens storlek
egenskapen mask-position,
ställer in maskens position
egenskapen mask,
genväg för alla maskingsegenskaper

↑