Le immagini in scala di grigi sono costituite da colore nero, grigio e bianco. Più specificamente, il colore grigio ha più livelli di sfumature. In HTML, gli utenti possono convertire l'immagine in una scala di grigi con l'aiuto del CSS "filtro" proprietà. La proprietà del filtro viene utilizzata principalmente per definire e impostare l'effetto visivo di un'immagine, come il rendering di immagini, sfondi e bordi.

In questo tutorial, dimostreremo come convertire un'immagine in scala di grigi in HTML/CSS

Come convertire un'immagine in scala di grigi in HTML/CSS?

Per convertire un'immagine in scala di grigi in HTML/CSS, seguire le istruzioni fornite.

Passaggio 1: aggiungi un contenitore di div

Innanzitutto, aggiungi un contenitore Div nel documento HTML utilizzando il “"Tag. Quindi, assegnalo un "classe"Attributo con un valore specifico. Ad esempio, "scala di gray"È usato per gli attributi di classe.

Passaggio 2: inserire intestazioni

Quindi, aggiungi l'intestazione del primo livello usando "

"Tag, quindi incorporare l'intestazione del livello due con l'aiuto di"

Passaggio 3: aggiungi l'immagine

Successivamente, aggiungi un'immagine usando ""Tag insieme agli attributi richiesti:

• IL "src"L'attributo viene utilizzato per aggiungere un URL dell'immagine.
• "altezza"È utilizzato per impostare l'altezza dell'immagine in un contenitore.
• "larghezza"Definisce la dimensione dell'immagine in orizzontale.
• "Al"Viene utilizzato per l'aggiunta del testo che verrà visualizzato se l'immagine non viene caricata per alcuni motivi:

Creatori di contenuti Linuxhint

Immagine in scala di grigi

Produzione

Passaggio 4: attributo della classe di accesso

Accedi all'attributo di classe con l'aiuto di ".scala di gray"E applicare il"allineamento"Proprietà per impostare l'allineamento del testo.

Passaggio 5: intestazione di stile

Applicare il "colore"Proprietà sull'intestazione accedendolo con il nome del tag"H1".

Passaggio 6: convertire l'immagine in scala di grigi

Ora, accedi all'immagine utilizzando il "img":

.img-graycale
Testo-align: centro;

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

img
Filtro: scala di grigi (100%);

Applicare il "filtro"Proprietà e imposta il valore"Grayscale (100%)"Per convertire l'immagine in una scala di grigi.

Produzione

Si può notare che l'immagine è stata convertita in un'immagine in scala di grigi:

Abbiamo dichiarato il metodo per convertire un'immagine in scala di grigi in HTML/CSS.

Conclusione

Per convertire un'immagine in scala di grigi in HTML e CSS, aggiungere un'immagine in un contenitore con l'aiuto di ""Tag. Quindi, accedi all'immagine in CSS per nome del tag e applica il “filtro"Proprietà con il valore"Grayscale (100%)". Questo post ha dimostrato il metodo più semplice per convertire un'immagine in scala di grigi in HTML usando CSS.