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сипаттамасы,
маскалауға арналған барлық сипаттамалардың қысқартылуы
