Her er resultaterne af denne artikel:
Lad os begynde!
Skift billedfarve i CSS
For at ændre farven på billedet i CSS skal du først lære om filteregenskaben og dens funktioner. Du får en bedre forståelse på denne måde.
filter CSS-egenskab
For at kontrollere den visuelle effekt af en billedfilteregenskab i CSS bruges. Visuelle effekter er:
- sløring
- lysstyrke
- farvejustering
- skygge
- Gennemsigtighed
Syntaks for filteregenskab
Syntaksen for filteregenskaben er:
filter : sløring ( ) | skygge ( ) | Gennemsigtighed ( )- sløring(): bruges til at anvende sløringseffekt på billedet.
- drop-shadow(): skabe en skygge over et billede.
- Gennemsigtighed(): bruges til at tilføje gennemsigtighed til billedet.
Vi kan bruge flere filtre ved at bruge denne filteregenskab. Denne artikel handler om, hvordan man ændrer farven på billedet, så her vil vi forklare, hvordan man bruger drop-shadow(), og opacitet() funktionerne med det.
drop-shadow()
drop-shadow() er en indbygget funktion i CSS, der tillader indstilling af skygge til ethvert element eller billede. Følgende parametre bruges i drop-shadow()-funktionen til at ændre farven på et billede:
- offset-x: Det bruges til at tilføje vandret skygge.
- offset-y: Skygger tilføjes lodret ved hjælp af dette.
- farve: Skygger farves med denne parameter.
For at præcisere disse punkter, lad os gå til syntaksen for drop-shadow:
skygge ( offset-x offset-y farve )- offset-x og offset-y kan være positive eller negative.
- I vandret bruges positiv værdi til at tilføje effekterne på højre side, og negativ er for venstre side.
- I lodret er den positive værdi for undersiden, og den negative er for toppen.
- I stedet for farve kan du tildele enhver farve, du vil give billedet.
Gennemsigtighed()
opacity() bruges til at tilføje gennemsigtighed til et element eller ethvert billede. Syntaksen for opaciteten() er:
Gennemsigtighed ( nummer ) ;Her “ nummer ” jeg s bruges til at indstille opacitetsniveauet mellem 0,0 til 1,0. For at gøre et billede helt gennemsigtigt kan du indstille det til 0.0.
For at præcisere ovennævnte punkter, lad os gå til eksemplet.
Hvordan ændrer man billedfarve i CSS?
I nedenstående eksempel vil vi først tilføje et billede ved hjælp af tag:
< img klasse = 'billede' src = 'image.jpg' alt = '' >
< / legeme >
Inden filteregenskaben blev anvendt, var resultatet som dette:
For at ændre farven på et billede, lad os flytte til CSS og anvende filteregenskaben på det. Vi vil indstille opaciteten til 0,5 for gennemsigtigheden af billedet. I drop-shadow()-funktionen er værdien af offset-x og offset-y 0, fordi vi kun ønsker at ændre farven på et billede.
.billede {filter : Gennemsigtighed ( 0,5 ) skygge ( 0 0 Brun ) ;
}
Her er det endelige resultat efter implementeringen:
Farven på billedet er blevet ændret.
Konklusion
For at ændre farven på et billede, bruges to CSS-funktioner: opacitet() og drop-shadow() med filteregenskaben. opacity() angiver gennemsigtigheden af billedet og drop-shadow() tildeler farve og skygge til billedet. Denne opskrivning forklarede metoden til at ændre farven på et billede ved hjælp af CSS.