Mask-repeat xususiyati
mask-repeat xususiyati maskaning o'lchami elementning o'lchamidan kichik bo'lsa, uning qanday takrorlanish usulini belgilaydi.
background-repeat ga o'xshash ishlaydi,
lekin masklarga qo'llaniladi.
Sintaksis
selector {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
repeat |
Mask ikkala o'q bo'yicha takrorlanadi (standart). |
no-repeat |
Mask takrorlanmaydi. |
repeat-x |
Mask faqat gorizontal yo'nalishda takrorlanadi. |
repeat-y |
Mask faqat vertikal yo'nalishda takrorlanadi. |
space |
Mask teng oraliq bilan takrorlanadi. |
round |
Mask bir xil to'ldirish uchun masshtablanadi. |
Misol . Takrorlanmasdan (no-repeat)
Takrorlanmasdan markazda bitta yurakcha:
<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;
}
:
Misol . Gorizontal takrorlash (repeat-x)
Yurakchalar faqat gorizontal yo'nalishda takrorlanadi:
<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;
}
:
Misol . Vertikal takrorlash (repeat-y)
Yurakchalar faqat vertikal yo'nalishda takrorlanadi:
<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;
}
:
Misol . Oraliqlar bilan takrorlash (space)
Yurakchalar oralıqlar bilan bir tekis taqsimlangan:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Misol . Masshtablanadigan takrorlash (round)
Yurakchalar bir xil to'ldirish uchun masshtablanadi:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Shuningdek qarang
-
mask-sizexususiyati,
maskaning o'lchamini belgilaydi -
mask-positionxususiyati,
maskaning joylashuvini o'rnatadi -
maskxususiyati,
barcha maskalash xususiyatlari uchun qisqartma
