Die Graustufenbilder bestehen aus schwarzer, grauer und weißer Farbe. Insbesondere hat die graue Farbe mehrere Ebenen von Farben. In HTML können Benutzer das Bild mit Hilfe des CSS in einen Graustufen umwandelnFilter" Eigentum. Die Filtereigenschaft wird hauptsächlich zum Definieren und Festlegen des visuellen Effekts eines Bildes verwendet, z. B. Bilder, Hintergründe und Grenzen.

In diesem Tutorial werden wir demonstrieren, wie ein Bild in HTML/CSS in Graustufen konvertiert werden kann

So konvertieren Sie ein Bild in HTML/CSS in Graustufen?

Um ein Bild in HTML/CSS in Graustufen umzuwandeln, befolgen Sie die angegebenen Anweisungen.

Schritt 1: Fügen Sie einen DIV -Behälter hinzu

Fügen Sie zunächst einen DIV -Container in das HTML -Dokument hinzu, indem Sie die “verwenden" Schild. Dann zuweisen Sie es eine “Klasse”Attribut mit einem bestimmten Wert. Zum Beispiel, "IMG-Grauenskala”Wird für Klassenattribute verwendet.

Schritt 2: Überschriften einfügen

Fügen Sie als nächstes die erste Stufe mit dem "Fügen Sie das" hinzu

Tag, dann die Überschrift von Level 2 mit Hilfe von “einbetten

Schritt 3: Bild hinzufügen

Fügen Sie danach ein Bild mit der "hinzu"Tag zusammen mit den erforderlichen Attributen:

• Der "srcDas Attribut wird verwendet, um eine URL des Bildes hinzuzufügen.
• “Höhe”Wird verwendet, um die Höhe des Bildes in einem Behälter festzulegen.
• “Breite”Definiert die Größe des Bildes horizontal.
• “Alt”Wird zum Hinzufügen des Textes verwendet, der angezeigt wird, wenn das Bild aus bestimmten Gründen nicht geladen wird:

LinuxHint Content Creators

Graustufenbild

Ausgang

Schritt 4: Zugriffsklassenattribut

Greifen Sie mit Hilfe von “auf das Klassenattribut zu".IMG-Grauenskala”Und wenden Sie die“ anTextausrichtungEigenschaft, um die Ausrichtung des Textes festzulegen.

Schritt 5: Stilüberschrift

Wende an "Farbe”Eigenschaft auf der Überschrift, indem Sie mit dem Tag -Namen darauf zugreifen“H1”.

Schritt 6: Bild in Graustufen umwandeln

Greifen Sie nun auf das Bild zu, indem Sie das verwenden “img”:

.IMG-GRAYSCALE
Text-Align: Mitte;

H1
Farbe: RGB (83, 21, 197);

img
Filter: Graustufen (100%);

Wende an "Filter”Eigenschaft und setzen Sie den Wert"Graustufen (100%)Um das Bild in eine Graustufe umzuwandeln.

Ausgang

Es ist zu bemerken, dass das Bild in ein Graustufenbild konvertiert wurde:

Wir haben die Methode zum Konvertieren eines Bildes in Graustufen in HTML/CSS angegeben.

Abschluss

Um ein Bild in HTML und CSS in Graustufen umzuwandeln, fügen Sie ein Bild mit Hilfe des “ein Bild in einen Behälter hinzu" Schild. Greifen Sie dann mit dem Tag -Namen in CSS auf das Bild zu und wenden Sie die “anFilter”Eigenschaft mit dem Wert“Graustufen (100%)”. Dieser Beitrag hat die einfachste Methode zum Konvertieren eines Bildes in HTML mit CSS gezeigt.