CSS Cambia il colore dell'immagine
Implementeremo i vari esempi di queste funzioni che la proprietà del filtro CSS fornisce in un file HTML.
Esempio 1: utilizzando la proprietà Filtro con la funzione Invert per modellare un'immagine in un file HTML
In questo esempio, useremo la funzione invertita della proprietà del filtro che inverte tutti i valori di esempio di un'immagine. La funzione invertita può accettare tutti i valori positivi per il grado di inversione e solo i valori negativi non sono accettati. Questa funzione della proprietà del filtro può cambiare da solo il colore di un'immagine.
In questo script, iniziamo aprendo l'intestazione del file per creare una classe di styling per l'elemento immagine della pagina HTML. Nello stile sotto il nome di "immagine", creiamo una classe in cui definiamo la proprietà insieme alla sua funzione che cambia il colore dell'immagine. Quindi, chiudiamo il tag di stile e l'intestazione del file. Dopo questo, apriamo il tag del corpo in cui diamo un'intestazione usando il tag "H2". La prima immagine è l'immagine colorata originale e non ha proprietà di styling mentre la seconda immagine è la stessa della prima, ma con lo stile e la classe aggiunti al suo tag. Aggiungiamo le immagini nel file tramite il percorso del file utilizzando la parola chiave "SRC". Dopo aver chiuso il tag immagine, terminiamo il file chiudendo il corpo e il tag HTML. Salviamo il file nel formato corretto in modo da poter accedervi nel nostro browser e ricevere i seguenti risultati:
Come possiamo vedere nell'output precedente, l'immagine a sinistra ha tutti i colori corretti mentre l'immagine a destra ha i colori invertiti ed è stata trasformata in un'immagine diversa.
Esempio 2: utilizzando la proprietà Filtro con la funzione SEPIA per modellare un'immagine in un file HTML
In questo esempio, utilizziamo la funzione seppia della proprietà del filtro per cambiare tutti i colori in un'immagine in un colore marrone caldo o giallo chiaro. La funzione seppia accetta tutti i valori positivi del grado di conversione del colore e rifiuta solo i valori negativi. Questa funzione di proprietà del filtro ha la capacità di modificare il colore di un'immagine da sola. All'interno del tag di stile di un file HTML, creeremo una classe di styling unica per l'elemento immagine.
In questo script, iniziamo accedendo all'intestazione del file per creare una classe di stile per l'elemento immagine della pagina HTML. Nel tag di stile, costruiamo una classe in cui definiamo la proprietà e il suo metodo, che altera il colore dell'immagine. Il tag di stile e l'intestazione del file saranno successivamente chiusi. Successivamente, apriamo il tag del corpo e inseriamo una voce usando il tag "H2". Quindi, usando l'elemento "IMG", posizioniamo le due immagini sullo schermo. La prima immagine è l'immagine a colori originale senza caratteristiche di stile, mentre la seconda immagine è la stessa della prima ma con la classe di stile inclusa nel suo tag. Utilizzando la parola chiave "SRC", inseriamo le foto nel file attraverso il percorso del file.
Come mostrato nell'output precedente, l'immagine a sinistra ha tutti i colori corretti. Tuttavia, quello a destra ha i colori assortiti.
Esempio 3: Utilizzo della proprietà Filtro con la funzione Grayscale per modellare un'immagine in un file HTML
In questo esempio, utilizzeremo la funzione del filtro in scala di grigi per convertire tutti i colori in una foto in nero, bianco e grigio. Questa funzione di proprietà del filtro può alterare il colore di una fotografia e trasformarlo in un'immagine in scala di grigi. Svilupperemo una classe di styling unica per l'elemento immagine all'interno del tag di stile di un file HTML.
In questo script, inseriamo prima l'intestazione del file per generare una classe di stile per l'elemento immagine della pagina HTML. Definiamo la proprietà e il metodo per alterare il colore dell'immagine in una classe. Il tag di stile e l'intestazione del file saranno successivamente chiusi. Quindi, apriamo il tag del corpo e inseriamo una rotta usando il tag "H2". Quindi, utilizziamo l'elemento "IMG" per visualizzare le due immagini sullo schermo. La prima immagine non ha caratteristiche di stile, mentre la seconda immagine è la stessa della prima ma con la classe di stile aggiunta al suo tag. Inseriremo le fotografie nel file usando la parola chiave "SRC" e il percorso del file.
L'immagine a sinistra contiene tutti i colori originali, come mostrato nell'output precedente. Tuttavia, quello a destra ha tonalità distinte.
Esempio 4: Utilizzo della proprietà Filtro con le funzioni Opacity and Drop Shadow per modellare un'immagine in un file HTML
In questo esempio, utilizzeremo le funzioni di opacità e ombra della proprietà del filtro per cambiare tutti i colori in una foto. Questa funzione della proprietà del filtro altera il colore di una fotografia e la converte in una nuova immagine.
In questo script, aggiungiamo prima l'intestazione del file per produrre una classe di stile per l'elemento immagine sulla pagina HTML. Definiamo la proprietà e il metodo per alterare il colore dell'immagine in una classe. Il tag di stile e l'intestazione del file saranno successivamente chiusi. Quindi, apriamo il tag del corpo e usiamo il tag "H2" per inserire un'intestazione. L'elemento "IMG" viene quindi utilizzato per visualizzare le due immagini sullo schermo. La prima immagine non ha caratteristiche di styling, mentre la seconda immagine è identica alla prima ma con la classe di stile aggiunta al suo tag. Inseriamo le immagini nel file utilizzando la parola chiave "SRC" e il percorso del file. Chiudiamo il corpo e gli elementi HTML una volta chiudiamo il tag immagine.
La foto a sinistra contiene tutti i colori originali, mentre quello a destra ha cambiato i toni, come indicato nel precedente output.
Conclusione
Abbiamo discusso dei vari metodi relativi alla modifica del colore di un'immagine in un file HTML usando CSS. La proprietà CSS più comunemente usata è la proprietà del filtro che ha funzioni distinte predefinite che possono cambiare il colore di un'immagine e può dargli un look trasformato. Abbiamo implementato molte di queste funzioni nell'ambiente Notepad ++ per comprendere meglio come funziona questa proprietà con funzioni distinte.