Mask-position касиети
mask-position касиети элементге салыштырмалуу масканын баштапкы абалын белгилейт.
background-position сыяктуу эле иштейт, бирок маскаларга колдонулат.
Синтаксис
селектор {
mask-position: <position>;
}
Маанилер
| Маани | Сүрөттөмө |
|---|---|
top left |
Сол жогорку бурчта (демейки). |
center |
Элементтин борборунда. |
50% 50% |
Борбор (center) сыяктуу эле. |
right bottom |
Оң төмөнкү бурчта. |
100px 200px |
Так пикселдеги координаттар. |
Мисал . Масканы борбордоо
>Сүрөттүн борборунда жүрөкчө маска:
<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;
}
:
Мисал . Сол жогорку бурч
Сол жогорку бурчтагы маска:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Мисал . Оң төмөнкү бурч
Оң төмөнкү бурчтагы маска:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Мисал . Так координаттар
Маска так координаттар боюнча позицияланат:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Мисал . Пропорциялуу позициялоо
Масканы проценттер менен позициялоо:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Ошондой эле караңыз
-
mask-sizeкасиети,
масканын өлчөмүн аныктайт -
mask-originкасиети,
позициялоо үчүн башат чекитин аныктайт -
maskкасиети,
маскалоонун бардык касиеттери үчүн кыскартылган белги
