Mask-size aýratynlygy
mask-size aýratynlygy maska suratynyň ölçegini belgileýär. Piksel/prosentde takyk ölçegleri belläp bilersiňiz ýa-da cover we contain açary sözlerini ulanyp bilersiňiz.
Sintaksis
selektor {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Görnüşleri
| Görnüşi | Düşündirişi |
|---|---|
auto |
Suratyň asyl ölçegi (bellenen ýagdaýda). |
cover |
Elementi doly örtmek üçin proporsiýalary saklap, maskany masştablaýar. |
contain |
Elementiň içine doly sýgmak üçin proporsiýalary saklap, maskany masştablaýar. |
100px 50px |
Pikselde takyk ölçegler. |
50% 100% |
Elementiň ölçeglerinden prosentdäki ölçegler. |
Mysal . Cover ölçegi
Maska elementi doly örtmek üçin masştablanylýar:
<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;
}
:
Mysal . Contain ölçegi
Maska element içine doly sýgmak üçin masştablanylýar:
<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;
}
:
Mysal . Pikselde kesgitlenen ölçegi
150×150 piksel ölçegli maska:
<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;
}
:
Mysal . Prosentdäki ölçegi
Maska elementiň iniň 80%-ini we beýikliginiň 60%-ini eýeleýär:
<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;
}
:
Mysal . Oklarda dürli ölçegler
Maska ini 200px we beýikligi 100px:
<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;
}
:
Şeýle-de görüň
-
mask-positionaýratynlygy,
maskanyň ýerleşişini kesgitleýär -
mask-repeataýratynlygy,
maskanyň gaýtalanmagyny kesgitleýär -
maskaýratynlygy,
maskalaýyş ähli aýratynlyklary üçin gysgaçylyk
