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;
}
:
Օրինակ . Կրկնություն միջակայքերով (space)
Սրտիկները հավասարաչափ բաշխված են միջակայքերով։
<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հատկությունը,
>դիմակավորման բոլոր հատկությունների համառոտ գրառում
