Aquests són els resultats d'aquest article:
Comencem!
Canvia el color de la imatge en CSS
Per canviar el color de la imatge en CSS, primer aprèn sobre la propietat del filtre i les seves funcions. D'aquesta manera aconseguiràs una millor comprensió.
filtre la propietat CSS
Per controlar l'efecte visual d'una propietat de filtre d'imatge de CSS s'utilitza. Els efectes visuals són:
- borrós
- brillantor
- ajust de color
- gota d'ombra
- opacitat
Sintaxi de filter Propietat
La sintaxi de la propietat del filtre és:
filtre : borrós ( ) | gota d'ombra ( ) | opacitat ( )- desenfocament (): S'utilitza per aplicar un efecte de desenfocament a la imatge.
- gota d'ombra(): crear una ombra sobre una imatge.
- opacitat (): s'utilitza per afegir transparència a la imatge.
Podem utilitzar diversos filtres utilitzant aquesta propietat de filtre. Aquest article tracta sobre com canviar el color de la imatge, així que aquí explicarem com utilitzar les funcions d'ombra () i opacitat () amb ella.
gota d'ombra()
drop-shadow() és una funció integrada de CSS que permet configurar l'ombra a qualsevol element o imatge. Els paràmetres següents s'utilitzen a la funció drop-shadow() per canviar el color d'una imatge:
- offset-x: S'utilitza per afegir ombra horitzontal.
- offset-y: Les ombres s'afegeixen verticalment amb això.
- color: Les ombres es coloren amb aquest paràmetre.
Per aclarir aquests punts, passem a la sintaxi de l'ombra:
gota d'ombra ( offset-x offset-y color )- offset-x i offset-y poden ser positius o negatius.
- En horitzontal, el valor positiu s'utilitza per afegir els efectes al costat dret, i el negatiu és al costat esquerre.
- En vertical, el valor positiu és per a la part inferior i el negatiu és per a la part superior.
- Al lloc del color, podeu assignar qualsevol color que vulgueu donar a la imatge.
opacitat ()
opacity() s'utilitza per afegir transparència a un element o qualsevol imatge. La sintaxi de l'opacity() és:
opacitat ( nombre ) ;Aquí “ nombre ” i s'utilitzen per establir el nivell d'opacitat entre 0,0 i 1,0. Per fer una imatge totalment transparent, podeu definir-la com a 0.0.
Per aclarir els punts esmentats anteriorment, passem a l'exemple.
Com canviar el color de la imatge en CSS?
A l'exemple següent, primer, afegirem una imatge amb l'etiqueta :
< img classe = 'imatge' src = 'imatge.jpg' tot = '' >
< / cos >
Abans d'aplicar la propietat del filtre, el resultat va ser el següent:
Per canviar el color d'una imatge, passem al CSS i apliquem-hi la propietat del filtre. Establirem l'opacitat a 0,5 per a la transparència de la imatge. A la funció drop-shadow(), el valor de offset-x i offset-y és 0 perquè només volem canviar el color d'una imatge.
.imatge {filtre : opacitat ( 0.5 ) gota d'ombra ( 0 0 marró ) ;
}
Aquest és el resultat final després de la implementació:
El color de la imatge s'ha canviat correctament.
Conclusió
Per modificar el color d'una imatge, s'utilitzen dues funcions CSS: opacity() i drop-shadow() amb la propietat filter. opacity() especifica la transparència de la imatge i drop-shadow() assigna color i ombra a la imatge. Aquest escrit explicava el mètode per canviar el color d'una imatge mitjançant CSS.