Ecco i risultati di questo articolo:
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. In questo modo otterrai una migliore comprensione.
filtra la proprietà CSS
Per controllare l'effetto visivo di un filtro immagine viene utilizzata la proprietà dei CSS. Gli effetti visivi sono:
- sfocatura
- luminosità
- regolazione del colore
- ombra
- opacità
Sintassi della proprietà del filtro
La sintassi della proprietà filter è:
filtro : sfocatura ( ) | ombra ( ) | opacità ( )- sfocatura(): utilizzato per applicare l'effetto sfocato sull'immagine.
- drop-shadow(): creare un'ombra su un'immagine.
- opacità(): utilizzato per aggiungere trasparenza all'immagine.
Possiamo usare più filtri usando questa proprietà del filtro. Questo articolo riguarda come cambiare il colore dell'immagine, quindi qui spiegheremo come usare le funzioni drop-shadow() e opacity() con essa.
ombra ()
drop-shadow() è una funzione incorporata di CSS che consente di impostare l'ombra su qualsiasi elemento o immagine. I seguenti parametri vengono utilizzati nella funzione drop-shadow() per cambiare il colore di un'immagine:
- offset-x: Viene utilizzato per aggiungere ombre orizzontali.
- 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:
ombra ( 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 il negativo è quello sul lato sinistro.
- In verticale, il valore positivo è per il lato inferiore e il negativo è per il lato superiore.
- Al posto del colore, puoi assegnare qualsiasi colore tu voglia dare all'immagine.
opacità()
opacity() viene utilizzato per aggiungere trasparenza a un elemento oa qualsiasi immagine. La sintassi di opacity() è:
opacità ( numero ) ;Qui “ numero ' io Viene utilizzato per impostare il livello di opacità tra 0,0 e 1,0. Per rendere un'immagine completamente trasparente, puoi impostarla come 0.0.
Per chiarire i punti di cui sopra, passiamo all'esempio.
Come cambiare il colore dell'immagine in CSS?
Nell'esempio seguente, per prima cosa, aggiungeremo un'immagine usando il tag :
< img classe = 'Immagine' src = 'immagine.jpg' Tutto quanto = '' >
< / corpo >
Prima di applicare la proprietà del filtro, il risultato era questo:
Per cambiare il colore di un'immagine, passiamo al CSS e applichiamo ad esso la proprietà del filtro. 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 ) ombra ( 0 0 Marrone ) ;
}
Ecco il risultato finale dopo l'implementazione:
Il colore dell'immagine è stato modificato correttamente.
Conclusione
Per modificare il colore di un'immagine, con la proprietà filter vengono utilizzate due funzioni CSS: opacity() e drop-shadow(). opacity() specifica la trasparenza dell'immagine e drop-shadow() assegna colore e ombra all'immagine. Questo articolo ha spiegato il metodo per cambiare il colore di un'immagine usando i CSS.