Hvordan endre bildefarge i CSS

Å kombinere opacitet () og drop-shadow () -funksjoner i filteregenskapen vil endre fargen på et bilde i CSS. Filteregenskap kan brukes til å bruke forskjellige effekter på et bilde, for eksempel refleksjoner, gråtoner, sepia, skygger og mer. Disse funksjonene bruker forskjellige fargekomponenter for å endre bildens farge. I denne håndboken vil du tilegne deg kunnskap om hvordan du bruker CSS for å endre fargen på et bilde.

Her er resultatene av denne artikkelen:

• filteregenskap
• Drop-shadow ()
• Opacity ()

La oss begynne!

Endre bildefarge i CSS

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

Filter CSS -eiendom

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

• uklarhet
• lysstyrke
• Fargejustering
• Drop-shadow
• Opacitet

Syntaks for filteregenskap

Syntaksen til filteregenskapen er:

Filter: Blur () | Drop-shadow () | Opacity ()

• uklarhet(): brukes til å bruke uskarphetseffekt på bildet.
• drop-shadow (): Lag en skygge over et bilde.
• Opacity (): Brukes til å legge til gjennomsiktighet til bildet.

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

Drop-shadow ()

Drop-shadow () er en innebygd funksjon av 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: Det brukes til å legge til horisontal skygge.
• offset-y: Skygger legges vertikalt ved hjelp av dette.
• farge: Skygger er farget med denne parameteren.

For å avklare disse punktene, la oss gå til syntaks av drop-shadow:

drop-shadow (offset-x offset-y-farge)

• 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 bunnsiden, og det negative er for toppen.
• I fargestedet kan du tilordne hvilken som helst farge du vil gi til bildet.

Opacity ()

Opacity () brukes til å legge til åpenhet til et element eller ethvert bilde. Syntaksen til opaciteten () er:

opacitet (tall);

Her “Antall” Jegs pleide å sette opacitetsnivået mellom 0.0 til 1.0. For å lage et bilde helt gjennomsiktig, kan du stille det som 0.0.

For å avklare ovennevnte poeng, la oss gå til eksemplet.

Hvordan endre bildefarge i CSS?

I eksemplet nedenfor vil vi først legge til et bilde ved hjelp av tag:

Før du brukte filteregenskapen, var utfallet slik:

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

.bilde
Filter: Opacitet (0.5) drop-shadow (0 0 brun);

Her er det endelige resultatet etter implementeringen:

Fargen på bildet er endret vellykket.

Konklusjon

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