Mask-position xususiyati
mask-position xususiyati element nisbatan maskaning boshlang'ich pozitsiyasini o'rnatadi.
background-position ga o'xshash ishlaydi, lekin maskalarga qo'llaniladi.
Sintaksis
selector {
mask-position: <position>;
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
top left |
Chap yuqori burchakda (standart). |
center |
Element markazida. |
50% 50% |
Center ga o'xshash. |
right bottom |
O'ng pastki burchakda. |
100px 200px |
Pikseldagi aniq koordinatalar. |
Misol . Maskani markazlashtirish
Rasm markazida yurak shaklidagi maska:
<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;
}
:
Misol . Chap yuqori burchak
Chap yuqori burchakdagi maska:
<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;
}
:
Misol . O'ng pastki burchak
O'ng pastki burchakdagi maska:
<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;
}
:
Misol . Aniq koordinatalar
Maska aniq koordinatalar bo'yicha joylashtiriladi:
<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;
}
:
Misol . Foizli joylashtirish
Maskani foizlar yordamida joylashtirish:
<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;
}
:
Shuningdek qarang
-
mask-sizexususiyati,
maskaning o'lchamini belgilaydi -
mask-originxususiyati,
joylashtirish uchun boshlang'ich nuqtani belgilaydi -
maskxususiyati,
barcha maskalash xususiyatlari uchun qisqartma
