Looking for css Keywords? Try Ask4Keywords

CSSBeschneiden und Maskieren


Syntax

  • Ausschnitt
  • Clip-Pfad: <Clip-Quelle> | [<Grundform> || <Clip-Geometrie-Box>] | keiner
  • Maskieren
  • Maskenbild: [keine | <mask-reference>] #
  • Maskenmodus: [<Maskenmodus>] #
  • Maskenwiederholung: [<Wiederholungsstil] #
  • Maskenposition: [<Position>] #
  • Masken-Clip: [<Geometrie-Box> | kein Clip ]#
  • Maskenursprung: [<Geometrie-Box>] #
  • Maskengröße: [<bg-size>] #
  • Maskenverbund: [<Compositing-Operator>] #
  • Maske: [<Maskenreferenz> <Maskierungsmodus>? || <position> [/ <bg-size>]? || <repeat-style> || <Geometrie-Box> || [<Geometrie-Box> | kein Clip] || <compositing-operator>] #

Parameter

Parameter Einzelheiten
Clip-Quelle Eine URL, die auf ein Inline-SVG-Element (oder) ein SVG-Element in einer externen Datei verweisen kann, das die Definition des Clippfads enthält.
Grundform Bezieht sich auf eins zwischen inset() , circle() , ellipse() oder polygon() . Mit einer dieser Funktionen wird der Beschneidungspfad definiert. Diese Formfunktionen funktionieren genauso wie in Shapes für Floats
Clip-Geometrie-Box Dies kann unter content-box , padding-box , border-box , margin-box , fill-box , stroke-box , view-box als Werte stehen. Wenn dieser Wert ohne Wert für <Grundform> angegeben wird, werden die Kanten der entsprechenden Box als Pfad für das Beschneiden verwendet. Bei Verwendung mit einer <Grundform> fungiert diese als Referenzfeld für die Form.
Maskenreferenz Dies kann none oder ein Bild oder eine Referenz-URL für eine Maskenbildquelle sein.
Wiederholungsstil Dies gibt an, wie die Maske in der X- und Y-Achse wiederholt oder gekachelt werden soll. Die unterstützten Werte sind " repeat-x , " repeat-y , " repeat , " space , " round , " no-repeat .
Maskenmodus Kann alpha oder luminance oder auto und gibt an, ob die Maske als Alphamaske oder Luminanzmaske behandelt werden soll. Wenn kein Wert angegeben wird und die Maskenreferenz ein direktes Bild ist, wird sie als Alphamaske betrachtet (oder). Wenn die Maskenreferenz eine URL ist, wird sie als Luminanzmaske betrachtet.
Position Dies gibt die Position der einzelnen Maskenebenen an und ähnelt der Eigenschaft background-position . Der Wert kann in einer 1-Wert-Syntax (wie top , 10% ) oder in einer 2-Wert-Syntax (wie top right , 50% 50% ) angegeben werden.
Geometrie-Box Dies gibt die Box an, auf die die Maske zugeschnitten werden soll ( Maskenbereich ), oder die Box, die als Referenz für den Ursprung der Maske ( Maskenpositionierungsbereich ) verwendet werden soll, abhängig von der Eigenschaft. Die Liste der möglichen Werte ist content-box , padding-box , border-box , margin-box , fill-box , stroke-box , view-box . Ausführliche Informationen zur Funktionsweise dieser Werte finden Sie in der W3C-Spezifikation .
BG-Größe Dies stellt die Größe jeder Maskenbildebene dar und hat dieselbe Syntax wie die background-size . Der Wert kann Länge oder Prozentsatz oder Auto oder Cover oder enthalten. Länge, Prozentsatz und Auto können entweder als einzelner Wert oder als einzelner Wert für jede Achse angegeben werden.
Compositing-Operator Dies kann einer der folgenden Werte sein: add , subtract , exclude , multiply pro Layer und definiert die Art des Compositing-Vorgangs, der für diesen Layer verwendet werden soll, mit denen darunter. Ausführliche Erläuterungen zu jedem Wert finden Sie in den W3C-Spezifikationen .

Bemerkungen

CSS-Clipping und -Maskierung sind sehr neue Konzepte und daher ist die Browserunterstützung für diese Eigenschaften relativ gering.

Masken:

Wie zum Zeitpunkt des Schreibens (Juli '16) unterstützen Chrome, Safari und Opera diese Eigenschaften mit dem Präfix -webkit- .

Firefox erfordert keine Präfixe, unterstützt jedoch nur Masken, wenn SVG- mask verwendet werden. Für Inline SVG mask die Syntax - mask: url(#msk) , während für die Verwendung von mask in einer externen SVG - Datei ist die Syntax mask: url('yourfilepath/yourfilename.svg#msk') . #msk in beiden Fällen bezieht sich auf die id des mask auf die verwiesen wird. Wie in dieser Antwort angegeben , unterstützt Firefox derzeit keine anderen Parameter als mask-reference in der mask Eigenschaft.

Internet Explorer (und Edge) bietet noch keine Unterstützung für diese Eigenschaft.

Die mask-mode Eigenschaft wird derzeit von keinem Browser mit oder ohne Präfixe unterstützt.

Clip-Pfad:

Zum Zeitpunkt des Schreibens (Juli '16) unterstützt Chrome, Safari und Opera den clip-path wenn der Pfad mit grundlegenden Formen (wie circle , polygon ) oder der url(#clipper) mit Inline-SVG erstellt wird. Sie unterstützen kein Beschneiden basierend auf Formen, die Bestandteil externer SVG-Dateien sind. Sie benötigen außerdem das Präfix -webkit .

Firefox unterstützt nur die url() Syntax für den clip-path während Internet Explorer (und Edge) keine Unterstützung bieten.

Beschneiden und Maskieren Verwandte Beispiele