Hvordan endre bildefarge i CSS

Her er resultatene av denne artikkelen:

• filter Eiendom
• drop-shadow()
• opasitet()

La oss begynne!

Endre bildefarge i CSS

For å endre fargen på bildet i CSS, lær først om filteregenskapen og dens funksjoner. Du vil få en bedre forståelse på denne måten.

filter CSS-egenskap

For å kontrollere den visuelle effekten av en bildefilteregenskap til CSS brukes. Visuelle effekter er:

• uklarhet
• lysstyrke
• fargejustering
• drop-shadow
• opasitet

Syntaks for filteregenskap

Syntaksen til filteregenskapen er:

• uklarhet(): brukes til å bruke uskarphet på bildet.
• drop-shadow(): lage en skygge over et bilde.
• opasitet(): brukes til å legge til gjennomsiktighet til bildet.

Vi kan bruke flere filtre ved å bruke denne filteregenskapen. Denne artikkelen handler om hvordan du endrer fargen på bildet, så her vil vi forklare hvordan du bruker drop-shadow(), og opacity()-funksjonene med den.

drop-shadow()

drop-shadow() er en innebygd funksjon i CSS som gjør det mulig å sette skygge til ethvert element eller bilde. Følgende parametere brukes i drop-shadow()-funksjonen for å endre fargen på et bilde:

• offset-x: Den brukes til å legge til horisontal skygge.
• offset-y: Skygger legges til vertikalt ved å bruke dette.
• farge: Skygger farges med denne parameteren.

For å klargjøre disse punktene, la oss gå til syntaksen til drop-shadow:

• offset-x og offset-y kan være positive eller negative.
• I horisontal brukes positiv verdi for å legge til effektene på høyre side, og negativ er for venstre side.
• I vertikal er den positive verdien for undersiden, og den negative er for toppen.
• I stedet for farge kan du tilordne hvilken som helst farge du vil gi bildet.

opasitet()

opacity() brukes til å legge til gjennomsiktighet til et element eller et hvilket som helst bilde. Syntaksen til opaciteten() er:

Her ' Antall ” Jeg s brukes til å sette opasitetsnivået mellom 0,0 til 1,0. For å gjøre et bilde helt gjennomsiktig kan du angi det som 0.0.

For å avklare punktene ovenfor, la oss gå til eksemplet.

Hvordan endre bildefarge i CSS?

I eksemplet nedenfor vil vi først legge til et bilde ved å bruke -taggen:

Før du brukte filteregenskapen, var resultatet slik:

For å endre fargen på et bilde, la oss gå til CSS og bruke filteregenskapen på det. Vi vil sette opasiteten til 0,5 for gjennomsiktigheten av bildet. I drop-shadow()-funksjonen er verdien av offset-x og offset-y 0 fordi vi kun ønsker å endre fargen på et bilde.

Her er det endelige resultatet etter implementeringen:

Fargen på bildet har blitt endret.

Konklusjon

For å endre fargen på et bilde, brukes to CSS-funksjoner: opacity() og drop-shadow() med filteregenskapen. opacity() spesifiserer gjennomsiktigheten til bildet og drop-shadow() tildeler farge og skygge til bildet. Denne oppskriften forklarte metoden for å endre fargen på et bilde ved hjelp av CSS.