Eigenschaft mask-origin
Die Eigenschaft mask-origin legt den Bezugspunkt für die Positionierung der Maske fest. Sie bestimmt, relativ zu welchem Teil des Elements (Rahmen, Abstände oder Inhalt) die Maske platziert wird.
Syntax
Selektor {
mask-origin: content-box | padding-box | border-box;
}
Werte
| Wert | Beschreibung |
|---|---|
border-box |
Die Maske wird relativ zum Rahmen des Elements positioniert (einschließlich border). |
padding-box |
Die Maske wird relativ zum Padding-Bereich positioniert (Standard). |
content-box |
Die Maske wird relativ zum Inhalt des Elements positioniert. |
Beispiel . border-box
Die Maske wird relativ zum Rahmen des Elements positioniert:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
padding: 20px;
border: 30px dashed rgba(0,0,0,0.3);
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px;
mask-repeat: no-repeat;
mask-origin: border-box;
}
:
Beispiel . padding-box
Die Maske wird relativ zum Abstandsbereich positioniert:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
padding: 20px;
border: 30px dashed rgba(0,0,0,0.3);
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px;
mask-repeat: no-repeat;
mask-origin: padding-box;
}
:
Beispiel . content-box
Die Maske wird relativ zum Inhalt positioniert:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
padding: 20px;
border: 30px dashed rgba(0,0,0,0.3);
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px;
mask-repeat: no-repeat;
mask-origin: content-box;
}
:
Siehe auch
-
Eigenschaft
mask-clip,
definiert den Abschneidebereich der Maske -
Eigenschaft
mask-position,
legt die Position der Maske fest -
Eigenschaft
mask,
Kurzform für alle Maskierungseigenschaften -
Eigenschaft
background-origin,
analoge Eigenschaft für den Hintergrund des Elements