mask-clip

Die CSS-Eigenschaft mask-clip ist Teil der CSS Masking Module Level 1 Spezifikation und legt den Maskierungsbereich fest. Sie schneidet buchstäblich den Hintergrundbereich eines Elements ab und definiert, welche Bereiche durch die Maske sichtbar sind: Rahmen, Innenabstand oder Inhaltsbereich. Es ist, als würde man den Rahmen eines Fotos anbringen und nur die Teile des Fotos zeigen, die nicht vom Rahmen verdeckt werden. Nur, dass wir in diesem Fall mit CSS-Box-Model-Werten festlegen, was abgeschnitten wird.

.element {
  mask-image: url(sun.svg);
  mask-clip: padding-box;
}

Dies funktioniert ähnlich wie die background-clip-Eigenschaft, hat jedoch drei zusätzliche Werte, die für SVG-Elemente gelten. In der folgenden Demo können Sie den Maskierungsbereich mit dieser Eigenschaft ändern. Darunter befindet sich dasselbe Bild, um den Effekt der Maskierung besser zu zeigen und den Rahmen- und Innenabstandsbereich zu markieren.

Syntax

mask-clip: <geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip

• Anfangswert: border-box
• Gilt für: alle Elemente. In SVG gilt es für Container-Elemente mit Ausnahme des <defs>-Elements und aller Grafikelemente.
• Vererbt: nein
• Animationstyp: diskret

Werte

/* Keyword values */
mask-clip: border-box;
mask-clip: content-box;
mask-clip: fill-box;
mask-clip: margin-box;
mask-clip: padding-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* No clip */
mask-clip: no-clip;

/* Global values */
mask-clip: intial;
mask-clip: inherit;
mask-clip: unset;

• border-box: Der gemalte Inhalt wird auf die Rahmenbox zugeschnitten. (Standardwert)
• content-box: Der gemalte Inhalt wird auf die Inhaltsbox zugeschnitten.
• fill-box: Der gemalte Inhalt wird auf die Objekt-Begrenzungsbox zugeschnitten.
• margin-box: Der gemalte Inhalt wird auf die Randbox zugeschnitten.
• padding-box: Der gemalte Inhalt wird auf die Innenabstandsbox zugeschnitten.
• stroke-box: Der gemalte Inhalt wird auf die Strich-Begrenzungsbox zugeschnitten.
• view-box: Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn für das das SVG-Viewport erzeugende Element ein viewBox-Attribut angegeben ist
  • Die Referenzbox wird am Ursprung des durch das viewBox-Attribut eingerichteten Koordinatensystems positioniert.
  • Die Abmessungen der Referenzbox werden auf die width- und height-Werte des viewBox-Attributs gesetzt.
    
• no-clip: Der gemalte Inhalt wird nicht abgeschnitten.
  
• initial: Wendet die Standardeinstellung der Eigenschaft an, die border-box ist.
• inherit: Übernimmt den mask-clip-Wert des Elternelements.
• unset: Entfernt den aktuellen mask-clip vom Element.

Notizen

• Für SVG-Elemente ohne zugehörige CSS-Layout-Box werden die Werte content-box und padding-box zu fill-box und für border-box und margin-box zu stroke-box berechnet.
• Für Elemente mit zugehöriger CSS-Layout-Box werden die Werte fill-box zu content-box und für stroke-box und view-box zum Anfangswert von mask-clip, nämlich border-box, berechnet.

Verwendung mehrerer Werte

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

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-clip: padding-box, border-box, content-box;
}

Demo

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	79+	53+	Alle	4+	15+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Alle	Alle	Alle	Alle	59+

Weitere Informationen

Verwandte Eigenschaften