Savybė mask-size
Savybė mask-size nustato kaukės paveikslėlio dydį. Galima nustatyti konkrečius dydžius pikseliais/procentais arba naudoti raktažodžius cover ir contain.
Sintaksė
selektorius {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Reikšmės
| Reikšmė | Aprašas |
|---|---|
auto |
Originalus paveikslėlio dydis (numatytasis). |
cover |
Keičia kaukės mastelį išlaikant proporcijas, kad ji visiškai padengtų elementą. |
contain |
Keičia kaukės mastelį išlaikant proporcijas, kad ji visiškai tilptų į elementą. |
100px 50px |
Konkrečūs dydžiai pikseliais. |
50% 100% |
Dydžiai procentais nuo elemento dydžių. |
Pavyzdys . Cover dydis
Kaukė keičiama masteliu, kad visiškai padengtų 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;
}
:
Pavyzdys . Contain dydis
Kaukė keičiama masteliu, kad visiškai tilptų į elementą:
<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;
}
:
Pavyzdys . Fiksuotas dydis pikseliais
Kaukė 150×150 pikselių dydžio:
<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;
}
:
Pavyzdys . Dydis procentais
Kaukė užima 80% elemento pločio ir 60% elemento aukščio:
<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;
}
:
Pavyzdys . Skirtingi dydžiai ašyse
Kaukė 200px pločio ir 100px aukščio:
<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;
}
:
Taip pat žiūrėkite
-
savybė
mask-position,
nustato kaukės padėtį -
savybė
mask-repeat,
nustato kaukės kartojimąsi -
savybė
mask,
trumpinys visoms kaukės savybėms
