Svojstvo mask-position
Svojstvo mask-position postavlja početnu poziciju maske u odnosu na element.
Radi analogno background-position, ali se primenjuje na maske.
Sintaksa
selektor {
mask-position: <position>;
}
Vrednosti
| Vrednost | Opis |
|---|---|
top left |
U gornjem levom uglu (podrazumevano). |
center |
Po centru elementa. |
50% 50% |
Analogno center. |
right bottom |
U donjem desnom uglu. |
100px 200px |
Konkretne koordinate u pikselima. |
Primer . Centriranje maske
Maska-srce po centru slike:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Primer . Gornji levi ugao
Maska u gornjem levom uglu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Primer . Donji desni ugao
Maska u donjem desnom uglu:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Primer . Tačne koordinate
Maska je pozicionirana po tačnim koordinatama:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Primer . Pozicioniranje procentima
Pozicioniranje maske pomoću procenata:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Pogledajte takođe
-
svojstvo
mask-size,
određuje veličinu maske -
svojstvo
mask-origin,
određuje polaznu tačku za pozicioniranje -
svojstvo
mask,
skraćenica za sva svojstva maskiranja
