“filter”Eiendom kan brukes til å anvende forskjellige visuelle effekter på et bilde, for eksempel refleksjon, gråtoner, sepia, metning, fargetone og mer. Å kombinere de relaterte funksjonene til de nevnte visuelle effektene i filteregenskapen vil endre fargen på et bilde. Disse funksjonene bruker forskjellige fargekomponenter for å endre bildens farge.

I denne håndboken lærer du hvordan du bruker CSS for å endre fargen på et bilde til blått.

Hvordan endre bildefarge i CSS?

I CSS kan du bruke filteregenskapen til å bruke en hvilken som helst grafisk effekt på et bilde eller for fargeskiftet til et HTML -element. Dessuten kan det brukes til å endre fargen på bildet. Så først, gå gjennom filteregenskapen og dens funksjoner.

CSS filteregenskap

For å kontrollere den visuelle effekten av et bilde, vil filteregenskapen til CSS bli brukt. Dens støttede visuelle effekter er:

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

Syntaks

Målet vårt er å endre fargen på et bilde til blått i CSS ved hjelp av filteregenskapen. For å gjøre det, vil vi følge den gitte syntaks:

Filter: Sepia () | Hue-rotate () | mett ()

Beskrivelsen av ovennevnte funksjoner er:

• • sepia (): Det brukes til å konvertere et bilde til et sepia -bilde ved å gi det et brunaktig/gult utseende.
  • Hue-rotate (): Det brukes til å bruke fargetone rotasjon på bildet. Denne funksjonen aksepterer den nødvendige vinkelen for rotasjonen som et argument.
  • mett (): Det brukes til å stille metningen på et bilde. Denne funksjonen godtar en prosentandel eller et tall som et argument som representerer konverteringsbeløpet.

For å avklare de ovennevnte punktene, la oss flytte til eksemplet.

La oss sjekke ut et eksempel for å endre fargen på et bilde til blått ved hjelp av de nevnte filteregenskapsfunksjonene.

Eksempel: Hvordan endre fargen på et bilde til blått i CSS?

For å endre fargen på bildet til blått, spesifiser først kilden til det valgte bildet i HTML -filen.

Her har vi lagt til et bilde ved hjelp av taggen og satt bredden til “450px”:

Endre fargen på et bilde til blått

Før du bruker filteregenskapen, vil websiden vår se slik ut:

Flytt til CSS og bruk filteregenskapen for å endre fargen på et bilde til blått.

For å gjøre det, vil vi sette verdien av Sepia (), Hue-rotate () og Metate () -funksjoner som “100%”,“190deg”Og“900%”Henholdsvis:

IMG
Filter: Sepia (100%) Hue-rotate (190deg) mett (900%);

Merk: Sekvensen av de ekstra funksjonene må være den samme som de gitte. I tilfelle du endrer den spesifiserte sekvensen, vil ikke bildet ta den nødvendige effekten.

Lagre koden din og åpne HTML -filen i nettleseren din:

Eksempel 2: Hvordan endre fargen på et bilde til lysblått?

For å endre fargen på bildet til lysblått, vil verdiene til sepia (), fargetrotate () og mett () funksjoner bli endret.

Her vil vi legge til et nytt bilde ved hjelp av taggen:

Endre fargen på et bilde til lysblått

Gå nå til CSS -delen og bruk "filter”Eiendom til det ekstra bildet.

Her vil vi sette verdien av sepia () som “300%”, Hue-rotate () som“150deg”Og mett () som“450%”:

IMG
Filter: Sepia (300%) Hue-rotate (150deg) mett (450%);

Som et resultat vil fargen på det gitte bildet bli endret til lyseblått.

Produksjon

Vi har dekket den enkleste metoden for å endre fargen på et bilde til blått i CSS.

Konklusjon

Å endre fargen på et bilde til blått, “sepia ()”,“Hue-rotate ()”, Og“mett ()”Funksjoner av“filter”Eiendom brukes. Fargen på bildet endres i henhold til den gitte verdien av Sepia (), Hue-rotate () og Metate () -funksjonene. Ved å bruke dette kan du stille inn de forskjellige fargene på bildet, for eksempel blå og lyseblå. Som vi har forklart i denne artikkelen, lar CSS -filteregenskapen deg endre fargen på et bilde til blått.