mask

Die mask-Eigenschaft ist eine Kurzschreibweise, um alle mask-*-Eigenschaften festzulegen. mask kann Teile des Elements, auf das es angewendet wird, ausblenden und akzeptiert einen oder mehrere durch Kommas getrennte Werte, wobei jeder Wert einer Masken-Ebene entspricht.

.element {
  mask: url(mask.png) right bottom / 100px repeat-y;
}

mask ist in der CSS Masking Module 1 Spezifikation enthalten.

Syntax

mask: <mask-layer>#
where

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

• Initialwert: siehe individuelle Eigenschaften
• Gilt für: alle Elemente. In SVG gilt es für Containerelemente ohne das <defs>-Element, alle Grafikelemente und das <use>-Element.
• Vererbt: nein
• Animationstyp: Nur die Eigenschaften mask-position und mask-size sind animierbar.

Werte

/* General examples */
mask: none;
mask: url(mask.svg);
mask: url(mask.png) luminance;
mask: url(mask.png) 100px 200px;
mask: url(mask.png) 100px 200px/50px 100px;
mask: url(mask.png) repeat-x;
mask: url(mask.png) 50% 50% / contain no-repeat border-box luminance;

/* Global values */
mask: inherit;
mask: initial;
mask: unset;

/* Multiple masks */
mask: url(mask.png) luminance center repeat-y exclude,
      linear-gradient(black, transparent);

Die Eigenschaft mask akzeptiert die folgenden Werte, von denen jeder den Wert einer mask-Bestandteileigenschaft annimmt, einschließlich

Wert	Eigenschaft	Was es bewirkt	Demo
<mask-reference>	mask-image	Legt das Bild fest, das als Masken-Ebene eines Elements verwendet wird.	CodePen
<masking-mode>	mask-mode	Gibt an, ob das CSS-Masken-Ebenenbild als Alpha-Maske oder als Luminanz-Maske behandelt wird.	CodePen
<position>	mask-position	Gibt die Anfangsposition eines Masken-Ebenenbildes relativ zum Masken-Positionsbereich an.	CodePen
<bg-size>	mask-size	Gibt die Größe eines Masken-Ebenenbildes an.	CodePen
<repeat-style>	mask-repeat	Teilt einer Maske mit, ob sie wiederholt werden soll oder nicht und in welchen Richtungen.	CodePen
<geometry-box>	mask-origin	Gibt den Masken-Positionsbereich einer Masken-Ebene an. Mit anderen Worten, es definiert, wo sich der Ursprung des Masken-Ebenenbildes befindet, ob es sich um den Rand des Randes, des Padding oder der Inhaltsbox handelt.	CodePen
	mask-clip	Bestimmt den Bereich, der von einer Maske betroffen ist. Der gemalte Inhalt eines Elements muss auf diesen Bereich beschränkt sein.	CodePen
<compositing-operator>	mask-composite	Ermöglicht es uns, ein Masken-Ebenenbild mit den darunter liegenden Masken-Ebenen zu kombinieren.	CodePen

Nicht alle Werte müssen in der Kurzschreibweise deklariert werden

Die Kurzschreibweise mask weist explizite Werte zu und setzt fehlende Eigenschaften auf ihre Anfangswerte. Im folgenden Beispiel verwenden wir die Kurzschreibweise der Eigenschaft mask, um nur die Werte für die Eigenschaften mask-image und mask-repeat anzugeben.

.element {
  mask: url(mask.png) repeat-x;
}

Das ist äquivalent zu folgendem

.element {
  mask-image: url(mask.png);
  mask-mode: match-source;     /* initial value */
  mask-position: center;       /* initial value */
  mask-size: auto;             /* initial value */
  mask-repeat: repeat-x;
  mask-origin: border-box;     /* initial value */
  mask-clip: border-box;       /* initial value */
  mask-composite: add;         /* initial value */
}

Die Reihenfolge der Werte spielt schon eine Rolle

Die Werte in der Kurzschreibweise mask können beliebig angeordnet werden, mit einer Ausnahme: dem Wert der Eigenschaft mask-size. Dieser muss *nach* dem Wert der Eigenschaft mask-position stehen und beide Werte müssen durch einen Schrägstrich (/) getrennt sein.

mask: url(mask.png) 120px 30px;                /* mask-position */
mask: url(mask.png) 100px 200px / 50px 100px;  /* mask-position / mask-size */
mask: url(mask.png) contain no-repeat;         /* Invalid declaration */

mask setzt mask-border auf seinen Anfangswert zurück

Sie sehen mask-border in den bisherigen Beispielen vielleicht nicht, aber es tut im Hintergrund immer noch etwas, da mask mask-border auf seinen Anfangswert zurücksetzt. Denken Sie daran, dass mask-border ebenfalls eine Kurzschreibweise ist, also hier ist, wie sie sich aufteilt.

mask-border-mode: alpha
mask-border-outset: 0
mask-border-repeat: stretch
mask-border-slice: 0
mask-border-source: none
mask-border-width: auto

Daher schlägt die Spezifikation vor, mask anstelle der einzelnen Eigenschaften zu verwenden, um Masken-Einstellungen zu überschreiben, die früher in der Kaskade auftauchen. So werden auch die mask-border-Eigenschaften ordnungsgemäß auf ihre Anfangswerte zurückgesetzt, so dass die später deklarierten Stile wie erwartet funktionieren.

Festlegen des <geometry-box>-Werts mit mask-clip und mask-origin

Sowohl mask-clip als auch mask-origin nehmen einen <geometry-box>-Wert an. Es gibt also ein paar Dinge zu beachten.

Erstens, wenn es einen <geometry-box>-Wert und das Schlüsselwort no-clip gibt, dann

• mask-origin ist die <geometry-box>
• mask-clip wird auf no-clip gesetzt

mask: url(mask.png) content-box no-clip;
/**
mask-origin: content-box;
mask-clip: no-clip;
*/

Wenn es einen <geometry-box>-Wert, aber kein no-clip-Schlüsselwort gibt, dann werden sowohl mask-origin als auch mask-clip auf den <geometry-box>-Wert gesetzt.

mask: url(mask.png) content-box;
/**
mask-origin: content-box;
mask-clip: content-box;
*/

Wie sieht es mit zwei <geometry-box>-Werten aus?

• Der erste setzt mask-origin
• Der zweite setzt mask-clip

mask: url(mask.png) content-box border-box;
/**
mask-origin: content-box;
mask-clip: border-box;
*/

Beispiel

Das folgende Beispiel verwendet zwei Masken-Ebenen über einem Bild

Browser-Unterstützung

Weitere Informationen

Tricks!

Verwandt