CSS
Beschneiden 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

Bemerkungen

Ausschnitt (Polygon)

CSS:

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:

<div></div>

Im obigen Beispiel wird ein polygonaler Beschneidungspfad verwendet, um das quadratische Element (200 x 200) in eine Dreiecksform zu schneiden. Die Ausgangsform ein Dreieck ist, weil der Pfad an beginnt (das heißt, erster Koordinaten at) 0 0 - das ist die linke obere Ecke der Box, geht dann zu 0 100% - die Ecke unten links des Kastens und dann schließlich zu 100% 50% was nichts anderes als der rechte Mittelpunkt der Box ist. Diese Pfade schließen sich selbst (dh der Startpunkt ist der Endpunkt), und die endgültige Form ist die eines Dreiecks.

Dies kann auch für ein Element mit einem Bild oder einem Farbverlauf als Hintergrund verwendet werden.

Beispiel ansehen

Ausgabe:

Ausschnitt (Kreis)

CSS:

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

Dieses Beispiel zeigt, wie Sie ein div an einen Kreis schneiden. Das Element wird in einen Kreis geschnitten, dessen Radius 30% beträgt, basierend auf den Abmessungen des Bezugsrahmens, dessen Mittelpunkt in der Mitte des Bezugsrahmens liegt. Da hier kein <Clip-Geometrie-Feld> (also Referenzfeld) bereitgestellt wird, wird das border-box des Elements als Referenzfeld verwendet.

Die Kreisform muss einen Radius und einen Mittelpunkt mit (x,y) -Koordinaten haben:

circle(radius at x y)

Beispiel ansehen

Ausgabe:

Beschneiden und Maskieren: Überblick und Unterschied

Mit dem Ausschneiden und Maskieren können Sie bestimmte Teile von Elementen transparent oder undurchsichtig machen. Beide können auf jedes HTML-Element angewendet werden.

Ausschnitt

Clips sind Vektorpfade. Außerhalb dieses Pfads ist das Element transparent, innerhalb undurchsichtig. Daher können Sie eine clip-path Eigenschaft für Elemente definieren. Jedes grafische Element, das auch in SVG vorhanden ist, kann hier als Funktion zur Definition des Pfads verwendet werden. Beispiele sind circle() , polygon() oder ellipse() .

clip-path: circle(100px at center);

Das Element ist nur innerhalb dieses Kreises sichtbar, der sich in der Mitte des Elements befindet und einen Radius von 100px hat.

Maskieren

Masken ähneln Clips, aber anstatt einen Pfad zu definieren, definieren Sie eine Maske, die sich über dem Element befindet. Sie können sich diese Maske als Bild vorstellen, das hauptsächlich aus zwei Farben besteht: Schwarz und Weiß.

Luminanzmaske : Schwarz bedeutet, dass die Region undurchsichtig ist und weiß, dass sie transparent ist. Es gibt jedoch auch einen grauen Bereich, der halbtransparent ist, sodass Sie glatte Übergänge machen können.

Alpha-Maske : Nur in den transparenten Bereichen der Maske ist das Element undurchsichtig.

Dieses Bild kann beispielsweise als Luminanzmaske verwendet werden, um einem Element einen sehr sanften Übergang von rechts nach links und von undurchsichtig nach transparent zu ermöglichen.

Mit der mask Eigenschaft können Sie den Maskentyp und ein Bild angeben, das als Ebene verwendet werden soll.

mask: url(masks.svg#rectangle) luminance;

Ein in masks.svg definiertes Element, das als rectangle bezeichnet wird, wird als Luminanzmaske für das Element verwendet.

Einfache Maske, die ein Bild von Vollton zu Transparent überblendet

CSS

div {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

Im obigen Beispiel gibt es ein Element mit einem Bild als Hintergrund. Die auf das Bild angewendete Maske (unter Verwendung von CSS) lässt das Bild so aussehen, als würde es von links nach rechts ausgeblendet.

Die Maskierung wird erreicht, indem ein linear-gradient , der von Weiß (links) bis Transparent (rechts) als Maske geht. Da es sich um eine Alphamaske handelt, wird das Bild transparent, wenn die Maske transparent ist.

Ausgabe ohne Maske:

Ausgabe mit der Maske:

Hinweis: Wie in den Anmerkungen erwähnt, funktioniert das obige Beispiel nur in Chrome, Safari und Opera, wenn es mit dem Präfix -webkit . Dieses Beispiel (mit einem linear-gradient als Maskenbild) wird in Firefox noch nicht unterstützt.

Verwenden Sie Masken, um ein Loch in die Mitte eines Bildes zu schneiden

CSS

div {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

Im obigen Beispiel wird ein transparenter Kreis in der Mitte mit einem radial-gradient Dieser wird dann als Maske verwendet, um die Wirkung eines Kreises zu erzeugen, der aus der Mitte eines Bildes ausgeschnitten wird.

Bild ohne Maske:

Bild mit Maske:

Verwenden von Masken zum Erstellen von Bildern mit unregelmäßigen Formen

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

HTML

<div></div>

Im obigen Beispiel werden drei Bilder mit linear-gradient (die, wenn sie an den entsprechenden Positionen platziert werden, 100% x 100% der Behältergröße abdecken) als Masken verwendet, um einen transparenten, dreieckigen Schnitt am unteren Rand des Bildes zu erzeugen.

Bild ohne Maske:

Bild mit der Maske: