Maskenposition - CSS-Tricks

Anonim

In CSS gibt die mask-positionEigenschaft die Anfangsposition eines Maskenebenenbilds relativ zum Maskenpositionsbereich an. Es funktioniert wie das background-positionEigentum.

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

Mit der Maskierung können Sie ausgewählte Teile eines Elements anzeigen, während der Rest ausgeblendet wird. In der folgenden Demo können Sie die Position des Maskenebenenbilds ändern:

Syntax

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Ursprünglicher Wert: 0% 0%
  • Gilt für: alle Elemente. In SVG gilt dies für Containerelemente mit Ausnahme des Elements, aller grafischen Elemente und des Elements.
  • Geerbt: 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 (falls angegeben ) angegeben werden, andernfalls als Prozentsatz.
  • Animationstyp: Wiederholbare Liste

Werte

A kann in Bezug auf den Offset - Schlüsselwort angegeben werden ( top, left, bottom, right, und center), Prozentsatz und Längenwerte in Bezug auf die Ränder des Elements, ähnlich wie die CSS - background-positionEigenschaft.

/* 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;

Wertedefinitionen

  • : Jede gültige CSS Länge (wie px, em, remund %, unter anderen) , die , wie weit der Rand des Maskenbilds von dem entsprechenden Rand des Elements angeben wird.
  • : Gibt die Position des Maskenebenenbilds als Prozentwert relativ zum Maskenpositionierungsbereich abzüglich der Größe des Maskenbilds 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 dies der Fall ist.
  • initial: Wendet die Standardeinstellung der Eigenschaft an, die 0% 0% ist.
  • inherit: Übernimmt den mask-positionWert des übergeordneten Elements .
  • unset: Entfernt den Strom mask-positionaus dem Element.

Mehrere Werte verwenden

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

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

Andere Syntax

mask-position Sie können einen, zwei, drei oder vier Werte annehmen, um die Position der Maskenebene horizontal und vertikal festzulegen.

Einzelwert

Wenn ein einzelner Wert festgelegt ist, wird dieser als horizontaler Wert angenommen und als vertikaler Wert angenommen center.

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

Bei Verwendung von Paarwerten wird der erste als horizontaler Wert verwendet, und der zweite gibt die Position der Make-Ebene 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, ist die Reihenfolge wichtig und der erste Wert entspricht immer dem horizontalen Versatz. Deshalb:

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

Wenn drei Werte angegeben werden, wird angenommen, dass der fehlende Versatz Null ist:

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

Mit einer vierwertigen Syntax können Sie angeben, auf welchen Seiten des Elements Sie die Maske relativ positionieren (Werte 1 und 3) und dann den Abstand zu diesen Seiten (Werte 2 und 4).

Wenn Sie also die Maske 100 Pixel vom unteren Rand des Elements und 200 Pixel von rechts positionieren möchten, können Sie Folgendes tun:

mask-position: bottom 100px right 200px;

Masken animieren

Es ist möglich, die Maskenposition zu animieren und mask-sizeKeyframe-Animationen und CSS-Übergänge wie folgt zu verwenden:

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

In dieser nächsten Demo animieren wir die Position der Maskenebene mithilfe der Keyframe-Animation:

Demo

Ändern Sie den Wert für mask-positionin der folgenden Demo:

Browser-Unterstützung

IE Kante Feuerfuchs Chrom Safari Oper
Nein 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Quelle: caniuse

Mehr Informationen

  • CSS-Maskierungsmodul Stufe 1 (Entwurf des Herausgebers)
  • Ausschneiden und Maskieren in CSS
  • Clipping vs. Masking: Wann wird jeder verwendet?
  • # 185: Spielen mit CSS-Masken (Video)