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