Свойство mask-size
Свойство mask-size маска расмининг ҳажмини ўрнатади. Узунлик/фоизларда аниқ ҳажмларни бериш ёки cover ва contain калит сўзларидан фойдаланиш мумкин.
Синтаксис
селектор {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Қийматлар
| Қиймат | Тавсиф |
|---|---|
auto |
Расмнинг оригинал ҳажми (андозага кўра). |
cover |
Элементни тўлиқ қоплаши учун маскани нисбатларни сақлаб ҳажмлайди. |
contain |
Элемент ичига тўлиқ сиғиши учун маскани нисбатларни сақлаб ҳажмлайди. |
100px 50px |
Пикселларда аниқ ўлчамлар. |
50% 100% |
Элемент ўлчамларидан фоизлардаги ўлчамлар. |
Мисол . Cover ҳажми
Маска элементни тўлиқ қоплаш учун ҳажмланади:
<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;
}
:
Мисол . Contain ҳажми
Маска элемент ичига тўлиқ сиғиши учун ҳажмланади:
<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;
}
:
Мисол . Пикселлардаги белгиланган ҳажм
150×150 пиксел ўлчамдаги маска:
<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;
}
:
Мисол . Фоизлардаги ҳажм
Маска элементнинг 80% эни ва 60% баландлигини эгаллайди:
<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;
}
:
Мисол . Уқлар бўйича турли ўлчамлар
Маска 200px эни ва 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;
}
:
Шунингдек қаранг
-
свойство
mask-position,
масканинг жойлашувини белгилайди -
свойство
mask-repeat,
масканинг такрорланишини белгилайди -
свойство
mask,
маскалашнинг барча свойстволари учун қисқартма
