mask-repeat касиети

mask-repeat касиети масканын элементинен өлчөмү кичине болгон учурда кандайча кайталанышын белгилейт. background-repeat сыяктуу эле иштейт, бирок маскаларга колдонулат.

Синтаксис

тандоочу {
	mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Маанилер

Маани	Сүрөттөмө
`repeat`	Маска эки ок боюнча кайталанат (демейки).
`no-repeat`	Маска кайталанбайт.
`repeat-x`	Маска горизонталдык багытта гана кайталанат.
`repeat-y`	Маска вертикалдык багытта гана кайталанат.
`space`	Маска бирдей аралыктар менен кайталанат.
`round`	Маска тегиз толтуруу үчүн масштабдалат.

Мисал . Кайталоосуз (no-repeat)

Бир жүрөкчө борбордо, кайталоосуз:

<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;
}

Мисал . Горизонталдык кайталоо (repeat-x)

Жүрөкчөлөр горизонталдык багытта гана кайталанат:

<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;
}

Мисал . Вертикалдык кайталоо (repeat-y)

Жүрөкчөлөр вертикалдык багытта гана кайталанат:

<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;
}

Мисал
Жүрөкчөлөр аралыктар менен бирдей бөлүштүрүлгөн:

`<img id="image" src="image.jpg">` `#image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-size: 80px; mask-repeat: space; }`

:

Мисал . Масштабдалуучу кайталоо (round)

Жүрөкчөлөр тегиз толтуруу үчүн масштабдалат:

`<img id="image" src="image.jpg">` `#image { width: 500px; height: 281px; mask-image: url("heart.svg"); mask-size: 80px; mask-repeat: round; }`

:

Ошондой эле караңыз

`mask-size` касиети,
масканын өлчөмүн аныктайт

`mask-position` касиети,
масканын ордун коёт

`mask` касиети,
маскалоонун бардык касиеттеринин кыскартылган формасы