Proprietatea mask-position
Proprietatea mask-position stabilește poziția inițială a măștii relativă la element.
Funcționează similar cu background-position, dar se aplică la măști.
Sintaxă
selector {
mask-position: <position>;
}
Valori
| Valoare | Descriere |
|---|---|
top left |
În colțul din stânga sus (implicit). |
center |
În centrul elementului. |
50% 50% |
Similar cu center. |
right bottom |
În colțul din dreapta jos. |
100px 200px |
Coordonate specifice în pixeli. |
Exemplu . Centrarea măștii
Mască în formă de inimă centrată pe imagine:
<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;
}
:
Exemplu . Colțul stânga sus
Mască în colțul din stânga sus:
<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;
}
:
Exemplu . Colțul dreapta jos
Mască în colțul din dreapta jos:
<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;
}
:
Exemplu . Coordonate exacte
Masca este poziționată la coordonate exacte:
<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;
}
:
Exemplu . Poziționare procentuală
Poziționarea măștii folosind procente:
<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;
}
:
Vezi și
-
proprietatea
mask-size,
determină dimensiunea măștii -
proprietatea
mask-origin,
determină punctul de referință pentru poziționare -
proprietatea
mask,
prescurtare pentru toate proprietățile de mascare
