Maskierung im Browser mit CSS und SVG

Maskierung ist eine Technik, mit der Sie ausgewählte Teile eines Elements oder eines Bildes auf dem Bildschirm angezeigt werden, während Sie den Rest verbergen. Webentwickler können diese Technik im Browser über die Maskeneigenschaft und das SVG -Mask -Element verwenden. Mit diesen Funktionen können Sie Maskierungseffekte auf Bilder und andere Elemente im Browser anzeigen, ohne irgendeine Art von Bildbearbeitungssoftware zu verwenden.

In diesem Artikel werde ich CSS- und SVG -Maskierungsfunktionen in Aktion zeigen und stelle auch sicher, dass einige Informationen zu aktuellen Browser -Unterstützungsproblemen enthalten sind.

Zum Zeitpunkt des Schreibens funktionieren die meisten Code-Muster nur in Webkit-Browsern, während SVG-basierte Masken zu einem breiteren Browser-Support zu genießen scheinen. Wenn Sie also die Beispiele ausprobieren möchten, empfehle ich Ihnen, einen Webkit -Browser wie Chrome zu verwenden.

Key Takeaways

• Maskierung in CSS und SVG ermöglicht die selektive Sichtbarkeit von Elementen, wobei entweder die CSS `mask`eigenschaft oder das SVG` `Element.
• CSS -Maskierung kann Bilder, Gradienten oder SVG -Referenzen verwenden, während die SVG -Maskierung mehr Kontrolle mit Vektorgrafiken bietet und Farb- und Gradientenmasken unterstützt.
• Browserunterstützung variiert: CSS -Masken werden hauptsächlich in Webkit -Browsern unterstützt, während SVG -Masken in modernen Browsern, einschließlich Firefox und Internet Explorer, eine breitere Kompatibilität aufweisen.
• Maskeneigenschaften wie "Mask-Image", "Mask-Modus", "Mask-Repeat", "Maskenposition" und "Mask-Größe" können einzeln oder kombiniert in eine Kurzform `mask`eigenschaft eingestellt werden aus Gründen der Bequemlichkeit.
• Fortgeschrittene Maskierungseffekte, einschließlich Animation und Verwendung von Text als Maske, können sowohl mit CSS als auch mit SVG erreicht werden, wodurch die Flexibilität und Kreativität von Webdesign verbessert wird.

Maskierung im Web

Sie können Maskierungseffekte im Internet mithilfe von Clipping oder Masking erzielen.

In

Cliping beinhaltet das Ablegen einer geschlossenen Vektorform wie einem Kreis oder einem Polygon auf einem Bild oder einem Element. Alle Teile des Bildes hinter der Form sind sichtbar, während alle Teile außerhalb der Grenzen der Form verborgen werden. Die Grenze der Form wird als Clip-Pfad bezeichnet, und Sie erstellen sie mit der Clip-Pfad-Eigenschaft.

Maskierung erfolgt mit einem PNG -Bild, einem CSS -Gradienten oder einem SVG -Element, um einige Teile eines Bildes oder eines anderen Elements auf der Seite zu verbergen. Sie können dies mit der CSS -Maskeneigenschaft erreichen.

In diesem Artikel werde ich mich ausschließlich auf die Maskierung der CSS -Maskeneigenschaft und das SVG -Element konzentrieren.

Die CSS -Maskeneigenschaft

Maske ist das CSS -Kurzeigeneignis für eine ganze Reihe von individuellen Eigenschaften. Schauen wir uns einige von ihnen genauer an.

Die Masken-Image-Eigenschaft

Sie können mit der Masken-Image-Eigenschaft das Maskenschichtbild eines Elements festlegen.

Der Wert Niemand ist nicht der gleiche wie ein Wert. Im Gegenteil - es zählt immer noch als transparente schwarze Bildschicht.

Sie können Maskenbild auf einen URL-Wert einstellen. Dies kann der Pfad zu einer PNG -Bilddatei, einer SVG -Datei oder einer Verweise auf ein SVG -Element sein. Sie können mehr als eine Maskenbildschicht festlegen, indem Sie eine entsprechende Anzahl von URL -Werten hinzufügen, die durch ein Komma getrennt sind.

Hier sind einige Beispiele:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Auf diese Weise verweisen Sie auf ein SVG -Element mit einer ID von mask1 :

.masked-element {
  mask-image: url(#mask1);
}

Ein Gradientenbild ist auch ein geeigneter Wert für die Masken-Image-Eigenschaft:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Die Eigenschaft der Maskenmaske

Mit einem Maskenmodus können Sie das Maskenschichtbild entweder als Alpha-Maske oder eine Luminanzmaske einstellen.

Eine Alpha -Maske ist ein Bild mit einem Alpha -Kanal. Ausführlicher ist der Alpha -Kanal die in den einzelnen Pixel -Daten enthaltenen Transparenzinformationen. Maskierungsvorgänge mit der auf Alpha eingestellten Maskenmessungseigenschaft verwenden die Alpha-Werte des Bildes als Maskenwerte.

Ein praktisches Beispiel für einen Alpha -Kanal ist ein PNG -Bild mit schwarzen und transparenten Bereichen. Das maskierte Element wird durch die schwarzen Teile des Maskenbildes angezeigt, die einen Alpha -Wert von einem haben. Alles andere unter den transparenten Teilen, die einen Alpha -Wert von Null haben, wird versteckt.

Ich werde dieses PNG -Bild als meine Alpha -Maske verwenden:

und führen Sie eine Maskierungsoperation auf dem folgenden JPG -Bild aus:

Hier passiert die Magie:

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

Und so sieht das Ergebnis im Browser aus:

Eine Luminanzmaske verwendet die Luminanzwerte eines Bildes als Maskenwerte. Ein PNG -Bild wie das obige - aber in Weiß - ist ein gutes Beispiel für eine Luminanzmaske:

Die Bereiche des Elements, die Sie maskieren möchten, die von den weißen Pixeln der Maske abgedeckt werden, werden durchzusetzen. Die Teile des maskierten Elements, das durch die transparenten Pixel der Maske bedeckt ist, werden versteckt.

Einstellen der Eigenschaft Maskenmode in Luminanz und Verwendung des obigen Bildes als Maske zeigt das gleiche Ergebnis wie zuvor an.

Hier ist der Code:

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

Die Masken-Repeat-Eigenschaft

Masken-Repeat funktioniert ziemlich ähnlich wie bei der Eigenschaft mit Hintergrund-Repeat. Es steuert die Fliesen von Maskenschichtbildern, nachdem Sie ihre Größe und Position eingestellt haben.

mögliche Werte sind:

• No-Repeat: Das Maskenschichtbild wird nicht über den verfügbaren Raum wiederholt.
• Repeat-X: Das Maskenschichtbild wird entlang der X-Koordinate wiederholt.
• Wiederholung: Das Bild der Maskenschicht wird in der y-Koordinate wiederholt.
• Raum: Das Bild der Maskenschicht wird wiederholt und im gesamten verfügbaren Bereich verteilt.
• Runde: Das Maskenschichtbild wird in der verfügbaren Fläche eine ganze Reihe von Male wiederholt. Wenn eine ganze Zahl nicht in den verfügbaren Raum passt, wird das Bild so lange skaliert.

Zum Beispiel ist dies das Bild, das ich als meine Maske verwenden möchte:

Der Code-Snippet unten legt die Masken-Repeat-Eigenschaft auf einen Speicherwert fest:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

führt zu einem folgenden Maskierungseffekt:

Die Maskenposition Eigenschaft

Sie können ein Maskenschichtbild mithilfe der Maskenpositionseigenschaft positionieren. Sie können diese Eigenschaft auf die gleichen Werte einstellen, die Sie für die bekanntere Eigenschaft im CSS-Hintergrund verwenden würden. Sein ursprünglicher Wert ist Mitte.

Wenn Sie beispielsweise die Maskenbildebene in der oberen linken Ecke des Ansichtsfensters platzieren möchten, stellen Sie die Maskenposition-Eigenschaft auf einen Wert von 0 0 :

ein

.masked-element {
  mask-image: url(#mask1);
}

so sieht der obige Code im Browser aus:

Ändern des Werts der obigen Maskenposition-Eigenschaft auf 100% 100% , zeigt das Maskenschichtbild unten rechts im Ansichtsfenster an:

Die Maskengrößeneigenschaft

Sie können die Größe Ihres Maskenschichtbildes mit der Eigenschaft der Maskengröße schnell festlegen, die dieselben Werte wie die bekanntere CSS-Hintergrundgröße akzeptiert.

Zum Beispiel zeigt das Einstellen von Maskengröße auf 50% das Maskenschichtbild bei 50% seiner vollständigen Breite:

Einstellungsmaskengröße zum Einbeziehen skaliert das Maskenschichtbild auf die größte Größe, so dass sowohl seine Breite als auch die Höhe in den Maskenpositionierungsbereich passen können:

Sie können sehen

Siehe die Beispiele für Pen -CSS -Maske von SitePoint (@sinepoint) auf CodePen.

Kompositierungsmaskenschichten

Wie oben erläutert, können Sie mehr als eine Maskenschicht für dasselbe Element verwenden, indem Sie jeden Wert der Maskenbild-Eigenschaft mit einem Komma trennen. Die Ebenen werden über die anderen gestapelt, wobei die letzte Ebene zuerst auf dem Bildschirm angezeigt wird.

zum Beispiel:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

im obigen Snippet wird mask2.png über mask1.png überzogen.

Mit der Masken-Komposit-Eigenschaft können Sie verschiedene Maskenschichten gemäß dem Wert der folgenden Schlüsselwörter kombinieren:

• hinzufügen: mask2.png wird auf mask1.png
gemalt
• Subtrahieren: Zeigt Teile von mask2.png an, die nicht mask1.png überlappen. Browser unterstützen das Standard-Keyword noch nicht, und zumindest vorerst müssen Sie das entsprechende Keyword-Quelle-Out
verwenden.
• Schnittpunkt: Zeigt Teile von mask2.png an, die sich mask1.png überlappen. Webkit-Browser, die die einzige Art von Browsern sind, die CSS-Masken unterstützen, scheinen jedoch nichts auf dem Bildschirm anzeigen, selbst wenn das nicht standardmäßige Komposit-Quell-in-Schlüsselwort verwendet wird.
• ausschließen: Zeigt Teile von mask1.png und mask2.png an, die sich nicht überlappen. Noch einmal, da das Standard -Keyword noch keine Unterstützung bietet, sind Sie mit dem Kompositionsbetreiber XOR viel besser.

Sie können sich auch die Live -Demos in der Codepen -Demo unten ansehen:

Siehe die Pen -CSS -Masken -Komposition von SitePoint (@sinepoint) auf CodePen.

Die Maske Shorthand -Eigenschaft

Sie können alle Eigenschaften festlegen, die CSS -Maskierungsvorgänge auf einmal mit Maske steuern.

Hier ist die vollständige Maskekurzform:

.masked-element {
  mask-image: url(#mask1);
}

Masken-Origin- und Masken-Clip-Arbeit wie die bekannteren Eigenschaften des Hintergrund-Ursprungs und des Hintergrund-Clips.

Obwohl Sie die Eigenschaften in der Masken-Kurzschrift neu ordnen können, müssen Sie die Maskengröße nach der Maskenposition-Eigenschaft festlegen, die durch das Symbol „/“ getrennt ist. Das Einstellen der Maskengröße ohne Einstellung der Maskenposition führt zu einer ungültigen Deklaration.

Da jeder Wert, den Sie in der Maskeneigenschaft nicht angeben, auf den anfänglichen Standardwert zurückgesetzt werden, wird die Verwendung von Maske wirklich praktisch, wenn Sie die einzelnen Eigenschaften zurücksetzen müssen.

Das SVG -Mask -Element

skalierbare Vektorgrafiken oder kurz SVG ist eine XML-basierte Sprache, um Grafiken zu markieren.

Sie können ein -Element in einem SVG -Dokument verwenden, um HTML -Elementen und anderen SVG -Grafiken Maskierungseffekte hinzuzufügen.

Eine weitere coole Sache, die Sie mit SVG machen können, ist, andere Elemente auf der Seite mit Text zu maskieren.

Lassen Sie uns in jede dieser Möglichkeiten genauer einsehen.

Verwenden des SVG -Elements auf einem HTML -Element

Zum Zeitpunkt des Schreibens verwendet das Element in einer Inline -SVG -Grafik, um ein HTML -Element zu maskieren, nur in Firefox -Browsern. Hier ist ein Beispiel:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

mit den folgenden CSS:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

In dem obigen Code habe ich ein -Element mit einer ID von mask1 eingesetzt. In der Maske habe ich einen Schwarz -Weiß -Gradienten mit einer ID von Grad und einer Kreisform platziert, die den Gradienten als Füllfarbe verwendet.

Schließlich habe ich auf den ID -Wert des SVG -Elements in der CSS -Maskeneigenschaft verwiesen. Dies wendet den Maskierungseffekt auf das Bild auf der Seite an.

Nur indem Sie ein paar andere Stildeklarationen für den Seitenhintergrund und das maskierte Bild hinzufügen, können Sie einen ziemlich dramatischen Effekt wie das unten erzielte:

:

Beachten Sie, wie der Teil der Kreismaske, gefüllt mit dem weißen Farbton des Gradienten, das maskierte Bild durchliegen lässt. Umgekehrt verbirgt der mit dem schwarze Farbton des Gradienten gefüllte Teil das maskierte Bild.

Hier ist eine Live -Demo davon auf CodePen (Denken Sie daran, es wird nur auf Firefox funktionieren!)

.

Siehe die Stiftmaskierung mit einem Inline -SVG -Mask -Element von SitePoint (@sinepoint) auf CodePen.

Verwenden des SVG -Elements auf einem SVG -Grafik

Sie können das gleiche SVG -Element aus dem vorherigen Beispiel verwenden, diesmal jedoch, um eine SVG -Grafik anstelle eines HTML -Elements zu maskieren. Der Vorteil ist, dass die Browser -Unterstützung viel besser ist, einschließlich Webkit -Browsern und dem neuesten IE.

Im Snippet unten werde ich das Bild platzieren, das ich in ein SVG -Element maskieren und die CSS -Maskeneigenschaft darauf anwenden möchte. Die CSS -Maskeneigenschaft verweist auf das SVG -Element mit der ID von mask1

, wie im vorherigen Beispiel. Hier ist der Code für die maskierte SVG -Grafik:

.masked-element {
  mask-image: url(#mask1);
}

Und dies ist der Ausschnitt, der sich um den Maskierungsvorgang in CSS kümmert:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Das Ergebnis ähnelt dem vorherigen Beispiel, nur diesmal können Sie es in allen wichtigen Browsern anzeigen.

schauen Sie sich die Codepen -Demo an:

Siehe die Pen -SVG -Maske eines SVG -Elements von SitePoint (@sinepoint) auf CodePen.

Maskierung mit SVG -Text

Sie können Maskierungsvorgänge mit einem Textelement in Ihrer SVG -Maske ausführen:

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

Das obere Ausschnitt fügt ein schwarzes SVG -Textelement in der SVG -Maske hinzu und wendet es unter Verwendung der CSS -Maskeneigenschaft auf eine hellblaue SVG -Ellipseform an. Was auch immer hinter der Ellipse -Form liegt (in diesem Fall ist es das Hintergrundbild des Körpers), wird durch den Text angezeigt. Das Ergebnis sieht ungefähr so ​​aus:

Der vollständige Code ist auf CodePen verfügbar:

Siehe die SVG -Textmaske von STEPOINT (@sinepoint) auf CodePen.

Animationsmasken

Sie können die Maskenposition und die Maskengröße mit CSS-Übergang und Keyframe-Animation animieren.

unten finden Sie ein grundlegendes Keyframe-Animationsbeispiel für ein sternförmiges PNG-Maskenbild.

Hier sind die relevanten Codeausschnitte:

Das maskierte Element ist ein HTML Tag:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Die Maskierungsoperation verwendet die Eigenschaft von Kurzmasken:

.masked-element {
  mask-image: url(#mask1);
}

Die .animate Klasse auf dem -Element verleiht dem sternförmigen Bild mit CSS-Transformation und Animation eine Bewegung:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Starten Sie einen Webkit -Browser wie Chrome und sehen Sie sich die folgende Live -Demo unter CodePen an:

Siehe den Stift mit CSS -Maske von Maria Antonietta Perna (@antonietta) auf Codepen.

Animieren eines SVG -Maskenelements mit CSS

Sie können Maskierungseffekte auf ein -Tag mit dem SVG -Element hinzufügen und es dann mit CSS animieren.

Hier ist eine schnelle Codepen -Demo: Die Animation ist in jedem Browser sichtbar, die Maskierung wird jedoch nur in Firefox gerendert:

Siehe die SVG -Maske von STML auf HTML -Element von SitePoint (@sinepoint) auf CodePen.

Die gute Nachricht ist, dass, wenn Sie Ihre SVG-Maske auf eine Inline-SVG-Grafik anwenden, Browser-Unterstützung sofort Sky-Rockets. Schauen Sie sich dieselbe Animationsdemo nur mit SVG an:

Siehe die SVG -Maske von SVG auf SVG -Element von SitePoint (@sinepoint) auf CodePen.

Browserunterstützung für die Maskeneigenschaft

Ich habe in diesem Artikel die Probleme der Browser -Unterstützung angesprochen. Eine einfache Aufschlüsselung der Situation zum Zeitpunkt des Schreibens sieht so aus:

• PNG oder externe SVG -Bildmasken auf HTML -Elementen unter Verwendung der CSS -Maskeneigenschaft arbeiten nur mit dem Prefix des -webkit -Anbieters auf Webkit -Browsern.
• Inline -SVG -Maskenelement auf einem HTML -Element wird nur in Firefox unterstützt.
• Inline -SVG -Mask -Element auf einem SVG -Element wird in Webkit -Browsern sowie in Firefox und dem neuesten Internet Explorer unterstützt.

Diese große Codepen -Demo von Yoksel bietet eine visuelle Illustration des Standes der Kunst, was die Browser -Unterstützung betrifft.

Alan Greenblatt stellt ein Github-Repository zur Verfügung, in dem er in die Details eingeht, von denen die CSS-Grafik-Eigenschaft unterstützt wird, von welchem ​​Browser.

Die Browser -Support -Kompatibilitätstabelle auf der Can I Use -Website bietet weitere Details und Links zu mehr Ressourcen.

Obwohl die aktuelle Browser-Unterstützung für CSS-Maske nicht großartig ist, werden Benutzer von nicht unterstützendem Browser nicht einmal bemerken, dass sie nicht einmal bemerken, wenn Sie diese Funktion als Verbesserung einiger dekorativer Elemente verwenden.

Schließlich genießt die Anwendung von Maskierungseffekten auf eine SVG -Grafik mit dem SVG -Element die größte Unterstützung für moderne Browser und sieht im Web gut aus.

Ressourcen

CSS -Maskierungsmodul Level 1 - W3C -Editor -Entwurf
Klippern und Maskieren in CSS auf CSS-Tricks
codrops CSS-Referenz zur Maskierung mit Maskenbild
svg auf mdn
SVG -Masken von Jakob Jenkov
CSS -Maskierung durch Dirk Schulze.

Kennen Sie einen coolen Maskierungseffekt im Web, den Sie gerne teilen möchten? Klicken Sie auf das Kommentarfeld und lassen Sie es mich wissen.

häufig gestellte Fragen (FAQs) auf CSS und SVG -Maskierung

Was ist der Unterschied zwischen CSS und SVG -Maskierung? Sie unterscheiden sich jedoch in ihrem Ansatz und ihren Fähigkeiten. Die CSS -Maskierung verwendet ein Bild als Maskenebene, bei dem der Alpha -Kanal des Maskenbildes die Sichtbarkeit des Elements bestimmt. Andererseits verwendet die SVG -Maskierung eine Vektorgrafik als Maskenschicht, die mehr Flexibilität und Kontrolle über die Form und Größe der Maske bietet. SVG -Maskierung unterstützt auch Farb- und Gradientenmasken, die bei der CSS -Maskierung nicht möglich sind.

Wie kann ich eine Gradientenmaske mit SVG? Fügen Sie Ihren Webelementen einen einzigartigen visuellen Effekt hinzu. Um eine Gradientenmaske mit SVG zu erstellen, müssen Sie ein lineares oder radialgradientes Element im Maskenelement definieren. Das Gradientenelement sollte mindestens zwei Stoppelemente haben, die die Farbe und die Opazität an verschiedenen Stellen entlang des Gradienten definieren. und SVG -Maskierung zusammen, um komplexe Maskierungseffekte zu erzielen. Sie können eine CSS -Maske auf ein Element anwenden und dann eine SVG -Maske auf dasselbe Element anwenden. Die endgültige Sichtbarkeit des Elements wird durch die Kombination der beiden Masken bestimmt.

Warum funktioniert meine CSS -Maske im Internet -Explorer nicht? Wenn Sie Internet Explorer unterstützen müssen, sollten Sie stattdessen SVG -Maskierung verwenden. Die SVG -Maskierung wird in allen wichtigen Browsern, einschließlich des Internet Explorer, unterstützt.

Wie kann ich eine Maske mit CSS oder SVG? Bei der CSS-Maskierung können Sie die Maskenbild-Eigenschaft mit CSS-Animationen oder -übergängen animieren. Für die SVG -Maskierung können Sie das Mask -Element mit SVG -Animationen animieren.

Kann ich einen Text als Maske mit CSS oder SVG verwenden? Für die CSS -Maskierung können Sie ein Textbild als Maskenbild verwenden. Für die SVG -Maskierung können Sie ein Textelement als Maskenelement verwenden. Eine radiale Gradientfunktion als Maskenbild. Um eine kreisförmige Maske mit SVG zu erstellen, können Sie ein Kreiselement als Maskenelement verwenden.

Wie kann ich eine komplexe Maske mit mehreren Formen erstellen? Sie können SVG -Maskierung verwenden. Mit der SVG -Maskierung können Sie mehrere Formelemente (z. B. Rekt, Kreis, Polygon usw.) als Maskenelement verwenden. Sie können diese Formen unabhängig voneinander positionieren und Größe erstellen, um eine komplexe Maske zu erstellen. Sie können ein Video als Maskenbild verwenden, indem Sie die Masken-Image-Eigenschaft auf eine Video-URL einstellen. SVG -Maskierung unterstützt keine Videomasken. Das Maskenbild. Sie können die Deckkraft anpassen, indem Sie das Maskenbild bearbeiten. Bei der SVG-Maskierung wird die Deckkraft der Maske durch die Eigenschaften der Fülloption und die Eigenschaften der Schlaganfalloptivität des Maskenelements bestimmt. Sie können die Deckkraft anpassen, indem Sie diese Eigenschaften ändern.

Das obige ist der detaillierte Inhalt vonMaskierung im Browser mit CSS und SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!