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.
Sie können Maskierungseffekte im Internet mithilfe von Clipping oder Masking erzielen.
InCliping 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
Maske ist das CSS -Kurzeigeneignis für eine ganze Reihe von individuellen Eigenschaften. Schauen wir uns einige von ihnen genauer an.
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
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
.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%);
}
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;
}
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:
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:
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:
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
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:
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.
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.
skalierbare Vektorgrafiken oder kurz SVG ist eine XML-basierte Sprache, um Grafiken zu markieren.
Sie können ein
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.
Zum Zeitpunkt des Schreibens verwendet das Element
.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
Schließlich habe ich auf den ID -Wert des SVG
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.
Sie können das gleiche SVG
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
.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.
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.
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
.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.
Sie können Maskierungseffekte auf ein -Tag mit dem SVG
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.
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:
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 SVGRessourcen
häufig gestellte Fragen (FAQs) auf CSS und SVG -Maskierung
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 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!
Welche Datei ist mydrivers
Was ist der Unterschied zwischen Dubbo und Zookeeper?
Welches Format hat doc?
Es gibt mehrere Möglichkeiten, die CSS-Position zu positionieren
So berechnen Sie die Fakultät einer Zahl in Python
Verwendung des Quellbefehls unter Linux
Auf welche Tasten beziehen sich Pfeile in Computern?
Lösung für das Problem, dass vscode nach dem Herunterladen von Python nicht ausgeführt werden kann
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
