Уласцівасць 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,
скарачэнне для ўсіх уласцівасцяў маскіравання
