Maskenclip - CSS-Tricks

Anonim

Die mask-clipCSS-Eigenschaft ist Teil der Spezifikation des CSS-Maskierungsmoduls der Stufe 1 und legt den Maskenmalbereich fest. Es schneidet buchstäblich den Hintergrundbereich eines Elements ab und definiert, welche Bereiche durch die Maske angezeigt werden: Rahmen, Abstand oder Inhaltsfeld. Es ist so, als würde man den Rahmen auf ein Foto setzen und nur die Teile des Fotos anzeigen, die nicht vom Rahmen abgedeckt werden. Nur in diesem Fall legen wir fest, was mithilfe von CSS-Box-Modellwerten abgeschnitten wird.

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

Dies funktioniert wie die background-clipEigenschaft, außer dass drei zusätzliche Werte für SVG-Elemente gelten. In der folgenden Demo können Sie den Maskenmalbereich mit dieser Eigenschaft ändern. Darunter befindet sich das gleiche Bild, um den Effekt einer besseren Maskierung und Markierung der Rand- und Polsterbereiche zu zeigen:

Syntax

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Ursprünglicher Wert: border-box
  • Gilt für: alle Elemente. In SVG gilt dies für Containerelemente mit Ausnahme des Elements, aller Grafikelemente.
  • Geerbt: 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 am Rahmenfeld abgeschnitten. (Standardwert)
  • content-box: Der gemalte Inhalt wird in das Inhaltsfeld abgeschnitten.
  • fill-box: Der gemalte Inhalt wird am Objektbegrenzungsrahmen abgeschnitten.
  • margin-box: Der gemalte Inhalt wird am Randfeld abgeschnitten.
  • padding-box: Der gemalte Inhalt wird an der Polsterbox befestigt.
  • stroke-box: Der gemalte Inhalt wird am Strichbegrenzungsrahmen befestigt.
  • view-box: Verwendet das nächste SVG-Ansichtsfenster als Referenzfeld. Wenn viewBoxfür das Element zum Erstellen des SVG-Ansichtsfensters ein Attribut angegeben ist:
    • Das Referenzfeld befindet sich am Ursprung des durch das viewBoxAttribut festgelegten Koordinatensystems .
    • Die Dimension des Referenzfelds wird auf die Werte widthund heightdes viewBoxAttributs festgelegt.
  • no-clip: Der gemalte Inhalt wird nicht abgeschnitten.
  • initial: Wendet die Standardeinstellung der Eigenschaft an border-box.
  • inherit: Übernimmt den mask-clipWert des übergeordneten Elements .
  • unset: Entfernt den Strom mask-clipaus dem Element.

Anmerkungen

  • Für SVG - Elemente ohne zugehörige CSS - Layout - Box, die Werte content-box, padding-boxberechnen zu fill-boxund für border-boxund margin-boxberechnen zu stroke-box.
  • Bei Elementen mit zugehöriger CSS - Layout - Box, die Werte zu fill-boxberechnen , um content-boxund für stroke-boxund view-boxcompute auf den Anfangswert mask-clipdavon ist border-box.

Mehrere Werte verwenden

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

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

Demo

Browser-Unterstützung

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

Mehr Informationen

Artikel am 6. November 2016

Ausschneiden und Maskieren in CSS

Mojtaba Seyedi