IL "filtro"La proprietà può essere utilizzata per applicare vari effetti visivi a un'immagine, come riflessione, scala di grigi, seppia, saturi, rotazione della tonalità e altro ancora. La combinazione delle funzioni correlate degli effetti visivi menzionati nella proprietà del filtro cambierà il colore di un'immagine. Queste funzioni usano componenti di colore diverso per modificare il colore dell'immagine.

In questo manuale, imparerai come usare CSS per cambiare il colore di un'immagine in blu.

Come cambiare il colore dell'immagine in CSS?

In CSS, è possibile utilizzare la proprietà del filtro per applicare qualsiasi effetto grafico a un'immagine o ai fini del passaggio di colore su un elemento HTML. Inoltre, può essere usato per cambiare il colore dell'immagine. Quindi, prima, passa attraverso la proprietà del filtro e le sue funzioni.

Proprietà del filtro CSS

Per controllare l'effetto visivo di un'immagine, verrà utilizzata la proprietà del filtro di CSS. I suoi effetti visivi supportati sono:

• • Regolazione del colore
  • sfocatura
  • Drop-Shadow
  • luminosità
  • opacità

Sintassi

Il nostro obiettivo è cambiare il colore di un'immagine in blu in CSS usando la proprietà del filtro. Per fare ciò, seguiremo la sintassi data:

Filtro: seppia () | Hue-rotate () | saturare()

La descrizione delle funzioni di cui sopra è:

• • seppia (): Viene utilizzato per convertire un'immagine in un'immagine seppia dandogli un aspetto brunastro/giallo.
  • Hue-rotate (): Viene utilizzato per applicare la rotazione della tonalità all'immagine. Questa funzione accetta l'angolo richiesto per la rotazione come argomento.
  • saturare(): Viene utilizzato per impostare la saturazione su un'immagine. Questa funzione accetta una percentuale o un numero come argomento che rappresenta l'importo della conversione.

Per chiarire i punti sopra menzionati, passiamo all'esempio.

Dai un'occhiata a un esempio per modificare il colore di un'immagine in blu usando le funzioni della proprietà del filtro menzionate.

Esempio: come cambiare il colore di un'immagine in blu in CSS?

Per modificare il colore dell'immagine in blu, in primo luogo, specificare la fonte dell'immagine selezionata nel file HTML.

Qui, abbiamo aggiunto un'immagine usando il tag e impostato la sua larghezza su "450px":

Cambia il colore di un'immagine in blu

Prima di applicare la proprietà Filtro, la nostra pagina Web sarà simile a questa:

Passa al CSS e applica la proprietà Filtro per cambiare il colore di un'immagine in blu.

Per fare ciò, imposteremo il valore di seppia (), hue-rotate () e saturate () funziona come "100%","190DEG" E "900%"Rispettivamente:

img
Filtro: seppia (100%) Hue-rotato (190DEG) saturato (900%);

Nota: La sequenza delle funzioni aggiunte deve essere la stessa del dato. Nel caso in cui si modifichi la sequenza specificata, l'immagine non assumerà l'effetto richiesto.

Ora, salva il tuo codice e apri il file HTML nel browser:

Esempio 2: come cambiare il colore di un'immagine in blu chiaro?

Al fine di modificare il colore dell'immagine in azzurro, i valori di seppia (), tonalità () e saturit () funzioni verranno modificati.

Qui aggiungeremo un'altra immagine usando il tag:

Cambia il colore di un'immagine in blu chiaro

Ora, passa alla sezione CSS e applica il “filtro"Proprietà all'immagine aggiunta.

Qui, imposteremo il valore di seppia () come "300%", Hue-rota () come"150DEG"E saturate () come"450%":

img
Filtro: seppia (300%) Hue-rotate (150DEG) saturato (450%);

Di conseguenza, il colore dell'immagine data verrà modificato in azzurro.

Produzione

Abbiamo coperto il metodo più semplice per cambiare il colore di un'immagine in blu in CSS.

Conclusione

Per cambiare il colore di un'immagine in blu, "seppia ()","Hue-rotate ()", E "saturare()"Funzioni di"filtro"La proprietà viene utilizzata. Il colore dell'immagine cambia in base al valore indicato delle funzioni seppia (), rotazione di tonalità () e saturi. Usando questo, puoi impostare i diversi colori dell'immagine, come blu e blu chiaro. Come abbiamo spiegato in questo articolo, la proprietà del filtro CSS ti consente di cambiare il colore di un'immagine in blu.