Īpašība mask-position
Īpašība mask-position nosaka maskas sākotnējo pozīciju attiecībā pret elementu.
Darbojas līdzīgi kā background-position, bet tiek piemērota maskām.
Sintakse
selektors {
mask-position: <position>;
}
Vērtības
| Vērtība | Apraksts |
|---|---|
top left |
Augšējā kreisajā stūrī (pēc noklusējuma). |
center |
Elementa centrā. |
50% 50% |
Līdzīgi kā center. |
right bottom |
Apakšējā labajā stūrī. |
100px 200px |
Konkrētas koordinātas pikseļos. |
Piemērs . Maskas centrēšana
Sirdsveida maska attēla centrā:
<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;
}
:
Piemērs . Augšējais kreisais stūris
Maskas augšējā kreisajā stūrī:
<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;
}
:
Piemērs . Apakšējais labais stūris
Maskas apakšējā labajā stūrī:
<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;
}
:
Piemērs . Precīzas koordinātas
Maskas pozicionēšana pēc precīzām koordinātām:
<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;
}
:
Piemērs . Procentuālā pozicionēšana
Maskas pozicionēšana, izmantojot 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;
}
:
Skatiet arī
-
īpašība
mask-size,
norāda maskas izmēru -
īpašība
mask-origin,
norāda atskaites punktu pozicionēšanai -
īpašība
mask,
saīsinājums visām maskēšanas īpašībām
