Својство 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,
скраћеница за сва својста маскирања
