Grazycale -bildene består av svart, grå og hvit farge. Mer spesifikt har den grå fargen flere nivåer av nyanser. I HTML kan brukere konvertere bildet til en gråtoner ved hjelp av CSS “filter”Eiendom. Filteregenskap brukes hovedsakelig til å definere og angi den visuelle effekten av et bilde, for eksempel å gjengi bilder, bakgrunn og grenser.

I denne opplæringen vil vi demonstrere hvordan du konverterer et bilde til gråtoner i HTML/CSS

Hvordan konvertere et bilde til gråtoner i HTML/CSS?

For å konvertere et bilde til gråtoner i HTML/CSS, følg de gitte instruksjonene.

Trinn 1: Legg til en div beholder

Legg først til en DIV -beholder i HTML -dokumentet ved å bruke "" stikkord. Deretter, tilordne den en "klasse”Attributt med en spesifikk verdi. For eksempel, "IMG-Grayscale”Brukes til klasseattributter.

Trinn 2: Sett inn overskrifter

Deretter legger du til det første nivået ved å bruke "

”Tag, og legg deretter overskriften på nivå to ved hjelp av“

Trinn 3: Legg til bilde

Etter det, legg til et bilde ved hjelp av “”Tag sammen med de nødvendige attributtene:

• “src”Attributt brukes til å legge til en URL av bildet.
• “høyde”Brukes for å sette høyden på bildet i en beholder.
• “bredde”Definerer størrelsen på bildet horisontalt.
• “alt”Brukes for å legge til teksten som vises hvis bildet ikke er lastet på grunn av noen grunner:

Linuxhint Content Creators

Grayscale Image

Produksjon

Trinn 4: Tilgangsklasseattributt

Få tilgang til klasseattributtet ved hjelp av ".IMG-Grayscale”Og bruk“Tekstalign”Eiendom for å angi justering av tekst.

Trinn 5: Stiloverskrift

Bruk “farge”Eiendom på overskriften ved å få tilgang til den med tagnavnet”H1”.

Trinn 6: Konverter bildet til gråtoner

Få tilgang til bildet ved å bruke "img”:

.IMG-Grayscale
tekst-align: sentrum;

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

IMG
Filter: Grayscale (100%);

Bruk “filter”Eiendom og angi verdien”Grayscale (100%)”For å konvertere bildet til en gråtoner.

Produksjon

Det kan legges merke til at bildet er blitt konvertert til et gråtonebilde:

Vi har uttalt metoden for å konvertere et bilde til gråtoner i HTML/CSS.

Konklusjon

For å konvertere et bilde til gråtoner i HTML og CSS, legg til et bilde i en beholder ved hjelp av "" stikkord. Få tilgang til bildet i CSS med tagnavn og bruk "filter”Eiendom med verdien”Grayscale (100%)”. Dette innlegget har vist den enkleste metoden for å konvertere et bilde til gråtoner i HTML ved bruk av CSS.