Xüsusiyyət mask-repeat
mask-repeat xüsusiyyəti, maskın ölçüləri elementin ölçülərindən kiçik olduqda maskın təkrar üsulunu təyin edir.
background-repeat ilə eyni şəkildə işləyir,
lakin masklara şamil edilir.
Sintaksis
selektor {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Dəyərlər
| Dəyər | Təsvir |
|---|---|
repeat |
Mask hər iki ox üzrə təkrarlanır (standart). |
no-repeat |
Mask təkrarlanmır. |
repeat-x |
Mask yalnız üfüqi istiqamətdə təkrarlanır. |
repeat-y |
Mask yalnız şaquli istiqamətdə təkrarlanır. |
space |
Mask bərabər məsafələrlə təkrarlanır. |
round |
Mask bərabər doldurmaq üçün miqyaslanır. |
Nümunə . Təkrar olmadan (no-repeat)
Mərkəzdə təkrar olmadan bir ürək:
<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;
}
:
Nümunə . Üfüqi təkrar (repeat-x)
Ürəkciklər yalnız üfüqi istiqamətdə təkrarlanır:
<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;
}
:
Nümunə . Şaquli təkrar (repeat-y)
Ürəkciklər yalnız şaquli istiqamətdə təkrarlanır:
<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;
}
:
Nümunə . Məsafələ təkrar (space)
Ürəkciklər bərabər məsafələrlə paylanır:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Nümunə . Miqyaslanan təkrar (round)
Ürəkciklər bərabər doldurmaq üçün miqyaslanır:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Həmçinin bax
-
xüsusiyyət
mask-size,
maskın ölçüsünü təyin edir -
xüsusiyyət
mask-position,
maskın mövqeyini təyin edir -
xüsusiyyət
mask,
bütün masklama xüsusiyyətləri üçün qısaltmadır
