Come cambiare il colore dell'immagine in CSS

La combinazione delle funzioni di opacità () e drop-shadow () nella proprietà del filtro cambierà il colore di un'immagine in CSS. La proprietà del filtro può essere utilizzata per applicare vari effetti a un'immagine, come riflessi, scala di grigi, seppia, ombre e altro ancora. Queste funzioni usano componenti di colore diverso per modificare il colore dell'immagine. In questo manuale, acquisirai conoscenza di come usare CSS per cambiare il colore di un'immagine.

Ecco i risultati di questo articolo:

• Proprietà del filtro
• drop-shadow ()
• opacità()

Iniziamo!

Cambia il colore dell'immagine in CSS

Per cambiare il colore dell'immagine in CSS, prima impara la proprietà del filtro e le sue funzioni. Otterrai una migliore comprensione in questo modo.

Filtro proprietà CSS

Per controllare l'effetto visivo di una proprietà del filtro dell'immagine di CSS viene utilizzato. Gli effetti visivi sono:

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

Sintassi della proprietà del filtro

La sintassi della proprietà del filtro è:

Filtro: BluR () | drop-shadow () | opacità()

• sfocatura(): Utilizzato per applicare l'effetto Blur sull'immagine.
• drop-shadow (): Crea un'ombra su un'immagine.
• opacità(): Utilizzato per aggiungere trasparenza all'immagine.

Possiamo utilizzare più filtri utilizzando questa proprietà del filtro. Questo articolo parla di come cambiare il colore dell'immagine, quindi qui spiegheremo come usare drop-shadow () e opacity () funziona con esso.

drop-shadow ()

drop-shadow () è una funzione integrata di CSS che consente di impostare l'ombra su qualsiasi elemento o immagine. I seguenti parametri vengono utilizzati nella funzione drop-shadow () per modificare il colore di un'immagine:

• offset-x: È usato per aggiungere un'ombra orizzontale.
• offset-y: Le ombre vengono aggiunte verticalmente usando questo.
• colore: Le ombre sono colorate con questo parametro.

Per chiarire questi punti, passiamo alla sintassi di Drop-Shadow:

Drop-Shadow (Offset-X Offset-Y Colore)

• Offset-X e Offset-y possono essere positivi o negativi.
• In orizzontale, il valore positivo viene utilizzato per aggiungere gli effetti sul lato destro e negativo è per il lato sinistro.
• In verticale, il valore positivo è per il lato inferiore e il negativo è per la parte superiore.
• Nel luogo del colore, puoi assegnare qualsiasi colore che desideri dare all'immagine.

opacità()

Opacity () viene utilizzato per aggiungere trasparenza a un elemento o a qualsiasi immagine. La sintassi dell'opacità () è:

opacità (numero);

Qui "numero" ioS usato per impostare il livello di opacità tra 0.0 a 1.0. Per rendere un'immagine completamente trasparente, puoi impostarla come 0.0.

Per chiarire i punti di menzione sopra, passiamo all'esempio.

Come cambiare il colore dell'immagine in CSS?

Nell'esempio seguente, in primo luogo, aggiungeremo un'immagine usando il tag:

Prima di applicare la proprietà del filtro, il risultato era così:

Per cambiare il colore di un'immagine, passiamo al CSS e applichiamo la proprietà del filtro ad essa. Imposteremo l'opacità su 0.5 per la trasparenza dell'immagine. Nella funzione drop-shadow (), il valore di offset-x e offset-y è 0 perché vogliamo solo cambiare il colore di un'immagine.

.Immagine
Filtro: opacità (0.5) drop-shadow (0 0 marrone);

Ecco il risultato finale dopo l'implementazione:

Il colore dell'immagine è stato cambiato con successo.

Conclusione

Per modificare il colore di un'immagine, due funzioni CSS: opacity () e drop-shadow () sono utilizzate con la proprietà del filtro. Opacity () Specifica la trasparenza dell'immagine e drop-shadow () assegna colore e ombra all'immagine. Questo articolo ha spiegato il metodo per modificare il colore di un'immagine usando CSS.