Maskierung in CSS

Manchmal ist beim Hinzufügen von Bildern zu einer Website erforderlich. Mit CSS können Sie dies mit großer Leichtigkeit tun und sich auf dieses Verfahren als Maskierung bezeichnen.

Maskierung bedeutet, dass Sie an bestimmten Stellen entweder ausblenden oder auf Websites mithilfe der CSS-Masken-Image-Eigenschaft auf Websites erscheinen. In dieser Beschreibung werden wir diskutieren, wie die Maskierung auf verschiedene Weise unter Verwendung der Mask-Image-Eigenschaft durchgeführt wird.

Lass uns anfangen.

Maske-Image-Eigenschaft

Die Masken-Image-Eigenschaft verbirgt Teile von Bildern entweder vollständig oder teilweise mit unterschiedlichen Opazitätsniveaus. Ein weiterer Zweck dieser Eigenschaft ist es, ein Bild als Maske über einen anderen zu schichten.

Syntax

Maskenbild: Keine | Bild | URL | initial | erben;

Parameter werden unten erläutert.

keiner: Dies ist ein Standardwert.

Bild: Dieser Wert macht ein Bild, das als Maskenschicht verwendet wird.

URL: Dieser Wert nimmt ein Bild- oder SVG -Element in Form einer URL -Referenz auf.

Lassen Sie uns die Maskierung in CSS anhand verschiedener Beispiele verstehen.

Beispiel 1

Im folgenden Beispiel werden wir ein Logo über ein anderes Bild maskieren.

Html

Vor Maskieren

Nach dem Maskieren

CSS

div img
Breite: 250px;
Höhe: 250px;

.Maskierung
Breite: 300px;
Höhe: 300px;
Hintergrundfarbe: Schwarz;
-webkit-mask-box-box-Image: URL (Logo.png);

Ausgang

Die Bilder wurden mit Erfolg maskiert.

Beispiel 2

Sie können auch Gradienten verwenden, um Bilder zu maskieren. Im Folgenden haben wir Ihnen ein Beispiel vorgestellt, in dem wir eine Ellipse als Maske über dem Bild mit Maskierung erstellt haben.

Html

Wir haben einfach ein Bild mit dem Tag hinzugefügt.

CSS

div img
Breite: 250px;
Höhe: 250px;

.Maskierung
Breite: 300px;
Höhe: 300px;
-Webkit-Mask-Box-Image: Radialgradient (Ellipse 60% 30% bei 50% 50%, Grau 60%, RGBA (146, 140, 140, 0.3) 40%);
Grenze: 3px fest schwarz;

Im obigen Code verwenden wir die Radialgradient-Funktion, um eine Schicht über ein Bild in Form einer Ellipse mit einer Größe von 60% am oberen und unten sowie 30% rechts und links zu maskieren. In der Zwischenzeit werden die Ausgangspositionen aller Seiten auf 50% eingestellt, um die Ellipseform in der Mitte zu halten. Darüber hinaus gaben wir ihm eine Startfarbe und auch eine Endfarbe.

Ausgang

Eine Maskenschicht wurde dem Bild in Form einer Ellipse erfolgreich hinzugefügt.

Beispiel 3

Angenommen, Sie möchten eine Schicht in Form eines Kreises mit Gradienten maskieren. Hier ist der Beispielcode.

CSS

div img
Breite: 200px;
Höhe: 200px;

.Maskierung
Breite: 250px;
Höhe: 250px;
-Webkit-Mask-Box-Image: Radialgradient (Kreis bei 50%50%, Grau 60%, RGBA (146, 140, 140, 0.3) 60%);
Grenze: 3px fest schwarz;

Um in der Mitte einen Kreis zu bilden, haben wir ihm eine Position von 50% auf allen Seiten mit Start- und Endfarben zugewiesen.

Ausgang

Ein maskierter Kreis wurde mit Erfolg geschaffen.

Abschluss

Maskierung bedeutet, dass Sie an bestimmten Stellen entweder ausblenden oder auf Websites mithilfe der CSS-Masken-Image-Eigenschaft auf Websites erscheinen. Die Maskenbild-Eigenschaft führt diese Aufgabe aus, indem sie Teilen der Bilder unterschiedliche Opazitätsniveaus zuweist. Darüber hinaus kann sie ein Bild über ein anderes maskieren. Es ist praktisch, wenn Sie bestimmte Teile eines bestimmten Bildes entweder verschwimmen, verstecken, aufhellen oder konzentrieren möchten. In diesem Beitrag haben wir diskutiert, wie die Maskierung in CSS zusammen mit relevanten Beispielen durchgeführt wird.