Svojstvo mask-size
Svojstvo mask-size postavlja veličinu slike maske. Možete zadati konkretne veličine u pikselima/procentima ili koristiti ključne reči cover i contain.
Sintaksa
selektor {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Vrednosti
| Vrednost | Opis |
|---|---|
auto |
Originalna veličina slike (podrazumevano). |
cover |
Skalira masku sa očuvanjem proporcija tako da u potpunosti prekrije element. |
contain |
Skalira masku sa očuvanjem proporcija tako da u potpunosti stane unutar elementa. |
100px 50px |
Konkretne veličine u pikselima. |
50% 100% |
Veličine u procentima od veličina elementa. |
Primer . Veličina cover
Maska se skalira da u potpunosti prekrije element:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Primer . Veličina contain
Maska se skalira da u potpunosti stane unutar elementa:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Primer . Fiksna veličina u pikselima
Maska veličine 150×150 piksela:
<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 . Veličina u procentima
Maska zauzima 80% širine i 60% visine elementa:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Primer . Različite veličine po osama
Maska 200px širine i 100px visine:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Pogledajte takođe
-
svojstvo
mask-position,
određuje položaj maske -
svojstvo
mask-repeat,
određuje ponavljanje maske -
svojstvo
mask,
skraćenica za sva svojstva maskiranja
