Mask-position | CSS-Tricks

CSS Almanac → Properties → M → mask-position

Mojtaba Seyedi am 10. Mai 2021

In CSS gibt die mask-position-Eigenschaft die anfängliche Position eines Maskenbildes relativ zum Maskenpositionsbereich an. Sie funktioniert wie die background-position-Eigenschaft.

.element {
  mask-image: url("star.svg");
  mask-position: 20px center;
}

Masking ermöglicht es Ihnen, ausgewählte Teile eines Elements anzuzeigen und den Rest auszublenden. In der folgenden Demo können Sie die Position des Maskenbildes ändern.

Syntax

mask-position: <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

Anfangswert: 0% 0%
Gilt für: alle Elemente. In SVG gilt es für Containerelemente mit Ausnahme des <defs>-Elements, aller grafischen Elemente und des <use>-Elements.
Vererbt: nein
Berechneter Wert: bestehend aus: zwei Schlüsselwörtern, die den Ursprung darstellen, und zwei Offsets von diesem Ursprung, die jeweils als absolute Länge (wenn als <length> angegeben) oder andernfalls als Prozentsatz angegeben werden.
Animationstyp: wiederholbare Liste

Werte

Eine <position> kann durch Offset-Schlüsselwörter (top, left, bottom, right und center), Prozentsätze und Längenwerte bezüglich der Ränder des Elements angegeben werden, ähnlich der CSS background-position-Eigenschaft.

/* Offset keywords */
mask-position: top;
mask-position: right;
mask-position: bottom;
mask-position: left;
mask-position: center;
 
/* Length values */
mask-position: 100px 200px;
mask-position: 5rem 20%;
mask-position: 0 10vh;
 
/* Percentage values */
mask-position: 25% 50%;
 
/* Global values */
mask-position: intial;
mask-position: inherit;
mask-position: unset;

Wertdefinitionen

<length>: Jede gültige CSS-Länge (wie px, em, rem und %, unter anderem), die angibt, wie weit der Rand des Maskenbildes vom entsprechenden Rand des Elements entfernt ist.
<percentage>: Gibt die Position des Maskenbildes als Prozentwert relativ zum Maskenpositionsbereich abzüglich der Größe des Maskenbildes an.
top: Entspricht 0% für die vertikale Position.
right: Entspricht 100% für die horizontale Position.
bottom: Entspricht 100% für die vertikale Position.
left: Entspricht 0% für die horizontale Position.
center: Entspricht 50% für die horizontale Position, wenn die horizontale Position nicht anders angegeben ist, oder 50% für die vertikale Position, wenn diese nicht anders angegeben ist.
initial: Wendet die Standardeinstellung der Eigenschaft an, die 0% 0% ist.
inherit: Übernimmt den mask-position-Wert des Elternelements.
unset: Entfernt die aktuelle mask-position vom Element.

Verwendung mehrerer Werte

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskenpositionen annehmen, und jeder Wert wird auf ein entsprechendes Maskenbild angewendet, das in der mask-image-Eigenschaft angegeben ist. Im folgenden Beispiel gibt der erste Wert die Position des ersten Bildes an, der zweite Wert die Position des zweiten Bildes und so weiter.

.element {
  mask-image: url("image-1.png"), url("image-2.png"), url("image-3.png");
  mask-position: 100px 10%, 0 right, center;
}

Andere Syntax

mask-position kann einen, zwei, drei oder vier Werte annehmen, um die Position der Maske horizontal und vertikal anzugeben.

Einzelner Wert

Wenn ein einzelner Wert gesetzt ist, wird dieser als horizontaler Wert genommen, und der vertikale Wert wird als center angenommen.

mask-position: 100px; /* 100px center */

Zwei Werte

Bei der Verwendung von Wertpaaren wird das erste als horizontaler Wert genommen, und das zweite gibt die Position der Maskenlage vertikal an.

mask-position: 10% 50%; /* x=10%, Y=50% */

Wenn beide Werte Schlüsselwörter sind, ist die Reihenfolge der Schlüsselwörter irrelevant.

mask-position: top left; /* = left top */

Wenn wir jedoch eine Kombination aus Schlüsselwort und Länge oder Prozentsatz haben, spielt die Reihenfolge eine Rolle, und der erste Wert entspricht immer dem horizontalen Offset. Daher

mask-position: 50% right; /* = horizontal center, vertical right */
mask-position: right 50%; /* = horizontal right, vertical center */

Drei Werte

Wenn drei Werte angegeben werden, wird der fehlende Offset auf Null angenommen.

mask-position: left 100px bottom; /* left=100px bottom=0 */

Vier Werte

Eine Syntax mit vier Werten ermöglicht es Ihnen anzugeben, von welchen Seiten des Elements Sie die Maske positionieren (Werte 1 und 3) und dann die Entfernung von diesen Seiten (Werte 2 und 4).

Wenn Sie also die Maske 100 Pixel vom unteren Rand des Elements und 200 Pixel vom rechten Rand entfernt positionieren möchten, können Sie dies wie folgt tun:

mask-position: bottom 100px right 200px;

Masken animieren

Es ist möglich, mask-position und mask-size mithilfe von Keyframe-Animationen und CSS-Übergängen zu animieren, wie im folgenden Beispiel:

.element {
  mask-image: url("mask.png");
  mask-position: 10px 10px;
  transition: mask-position 1s ease-in-out;
}
 
.element:hover {
  mask-position: right 10px bottom 10px;
}

In der nächsten Demo animieren wir die Position der Maskenlage mithilfe von Keyframe-Animationen.