CSS: Come Rendere un’Immagine in Scala di Grigio

Hai mai desiderato cambiare l’aspetto di un’immagine sul tuo sito senza modificarne il file originale? Fortunatamente, è possibile farlo facilmente utilizzando HTML e CSS. In questo articolo, ti mostreremo come rendere in scala di grigio un’immagine sul tuo sito.

Passo 1: Aggiungi un’immagine al tuo articolo o pagina

Inizia aggiungendo l’immagine che desideri trasformare in scala di grigio al tuo articolo o pagina. Puoi farlo utilizzando direttamente il codice HTML dell’immagine:

<img class="grayscale-image" src="../assets/images/png/landofworld.png" alt="immagine in scala di grigio">

Assicurati di sostituire il percorso dell’immagine con il percorso corretto del tuo file immagine.

Passo 2: Aggiungi il CSS per la scala di grigi

Ora, aggiungi il seguente codice CSS al tuo articolo o alla tua pagina:

<style>
    .grayscale-image {
        filter: grayscale(100%);
    }
</style>

Questo codice applica il filtro grayscale all’immagine, rendendola completamente in scala di grigio. Puoi regolare il valore percentuale secondo le tue preferenze.

Passo 3: Visualizza il risultato

Salva le modifiche e visualizza l’articolo o la pagina. Ora dovresti vedere l’immagine trasformata in scala di grigio. Il filtro CSS agisce solo sulla visualizzazione nell’ambito della pagina web e non modifica il file immagine originale.

Con questo semplice trucco HTML e CSS, puoi migliorare l’aspetto delle tue immagini senza modificarne i file sorgente. Sperimenta con i valori del filtro per ottenere l’effetto desiderato!