Sifa mask-position
Sifa mask-position inaweka nafasi ya awali ya kifuniko ikilinganishwa na kipengele.
Inafanya kazi kama background-position, lakini inatumika kwa vifuniko.
Syntax
kichaguli {
mask-position: <position>;
}
Thamani
| Thamani | Maelezo |
|---|---|
top left |
Kwenye kona ya juu kushoto (msingi). |
center |
Katikati ya kipengele. |
50% 50% |
Kama center. |
right bottom |
Kwenye kona ya chini kulia. |
100px 200px |
Viwekawima maalum kwenye saizi ya pikseli. |
Mfano . Kuweka Kifuniko Katikati
Kifuniko cha pembe moyo katikati ya picha:
<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;
}
:
Mfano . Kona ya Juu Kushoto
Kifuniko kwenye kona ya juu kushoto:
<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;
}
:
Mfano . Kona ya Chini Kulia
Kifuniko kwenye kona ya chini kulia:
<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;
}
:
Mfano . Viwekawima Maalum
Kifuniko kimewekwa kwa viwekawima maalum:
<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;
}
:
Mfano . Kuweka Nafasi kwa Asilimia
Kuweka nafasi ya kifuniko kwa kutumia asilimia:
<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;
}
:
Angalia Pia
-
sifa
mask-size,
inabainisha ukubwa wa kifuniko -
sifa
mask-origin,
inabainisha hatua ya kuanzia kwa kuweka nafasi -
sifa
mask,
ufupisho kwa sifa zote za kufunika
