Savybė mask-position
Savybė mask-position nustato pradinę kaukos padėtį elemento atžvilgiu.
Veikia panašiai kaip background-position, bet taikoma kaukoms.
Sintaksė
selektorius {
mask-position: <position>;
}
Reikšmės
| Reikšmė | Aprašas |
|---|---|
top left |
Kairiajame viršutiniame kampe (pagal nutylėjimą). |
center |
Elemento centre. |
50% 50% |
Analogiska center. |
right bottom |
Dešiniajame apatiniame kampe. |
100px 200px |
Konkrečios koordinatės pikseliais. |
Pavyzdys . Kaukos centravimas
Širdelės formos kaukos centravimas vaizde:
<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;
}
:
Pavyzdys . Kairysis viršutinis kampas
Kaukos kairiajame viršutiniame kampe:
<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;
}
:
Pavyzdys . Dešinysis apatinis kampas
Kaukos dešiniajame apatiniame kampe:
<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;
}
:
Pavyzdys . Tikslios koordinatės
Kaukos pozicionavimas pagal tikslias koordinates:
<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;
}
:
Pavyzdys . Procentinis pozicionavimas
Kaukos pozicionavimas naudojant procentus:
<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;
}
:
Taip pat žiūrėkite
-
savybė
mask-size,
nustato kaukos dydį -
savybė
mask-origin,
nustato atskaitos tašką pozicionavimui -
savybė
mask,
sutrumpinimas visoms maskavimo savybėms
