CSS endrer bildefarge
Vi vil implementere de flere eksemplene på disse funksjonene som CSS -filteregenskapen gir i en HTML -fil.
Eksempel 1: Bruke filteregenskapen med invert -funksjonen for å style et bilde i en HTML -fil
I dette eksemplet vil vi bruke filterets eiendoms inverteringsfunksjon som vil invertere alle prøveverdiene til et bilde. Invert -funksjonen kan akseptere alle positive verdier for inversjonsgraden, og bare de negative verdiene er ikke akseptert. Denne funksjonen til filteregenskapen kan på egenhånd endre fargen på et bilde.
I dette skriptet starter vi med å åpne overskriften til filen for å lage en stylingklasse for bildeelementet på HTML -siden. I stilen under navnet “Image” lager vi en klasse der vi definerer egenskapen sammen med dens funksjon som endrer fargen på bildet. Deretter lukker vi stilmerket og overskriften til filen. Etter dette åpner vi Body -taggen der vi gir en overskrift ved å bruke "H2" -koden. Det første bildet er det originale fargede bildet og har ingen stylingegenskaper i det mens det andre bildet er det samme som det første, men med stilen og klassen lagt til taggen. Vi legger til bildene i filen via filstien ved å bruke nøkkelordet "SRC". Etter å ha stengt bildekoden, avslutter vi filen ved å lukke kroppen og HTML -taggen. Vi lagrer filen i riktig format slik at vi får tilgang til den i nettleseren vår og mottar følgende resultater:
Som vi kan se i forrige utgang, har bildet til venstre alle riktige farger mens bildet til høyre har de omvendte fargene og har blitt omgjort til et annet bilde.
Eksempel 2: Bruke filteregenskapen med sepia -funksjonen for å style et bilde i en HTML -fil
I dette eksemplet bruker vi sepia -funksjonen til filteregenskapen for å endre alle fargene i et bilde til en varm brun eller lys gul farge. Sepia -funksjonen godtar alle de positive fargekonverteringsgradsverdiene og avviser bare de negative verdiene. Denne filteregenskapsfunksjonen har kapasitet til å endre fargen på et bilde på egen hånd. Inne i stilmerket til en HTML -fil, vil vi lage en unik stylingklasse for bildeelementet.
I dette skriptet begynner vi med å få tilgang til filens overskrift for å lage en stilklasse for bildeelementet på HTML -siden. I stilmerket konstruerer vi en klasse der vi definerer egenskapen så vel som metoden, som endrer fargen på bildet. Stilmerket og filens overskrift vil deretter være lukket. Etter det åpner vi kroppskoden og setter inn en overskrift ved hjelp av “H2” -merket. Deretter ved å bruke "IMG" -elementet plasserer vi de to bildene på skjermen vår. Det første bildet er det originale fargebildet uten stilegenskaper, mens det andre bildet er det samme som det første, men med stylingklassen inkludert i taggen. Ved å bruke nøkkelordet "SRC", setter vi inn bildene i filen gjennom filstien.
Som vist i forrige utgang, har bildet til venstre alle de riktige fargene. Imidlertid har den til høyre de forskjellige fargene.
Eksempel 3: Bruke filteregenskapen med gråtonfunksjonen for å style et bilde i en HTML -fil
I dette eksemplet vil vi bruke gråtonfilterfunksjonen for å konvertere alle fargene i et bilde til svart, hvitt og grått. Denne filteregenskapsfunksjonen kan endre et fotografiets farge og forvandle den til et gråtonebilde. Vi vil utvikle en unik stylingklasse for bildeelementet i stilkoden til en HTML -fil.
I dette skriptet skriver vi først inn filens overskrift for å generere en stilklasse for HTML -sidens bildeelement. Vi definerer egenskapen så vel som metoden for å endre fargen på bildet i en klasse. Stilmerket og filens overskrift vil deretter være lukket. Deretter åpner vi kroppskoden og setter inn en overskrift ved hjelp av “H2” -koden. Deretter bruker vi “IMG” -elementet for å vise de to bildene på skjermen vår. Det første bildet har ingen stylingsfunksjoner, mens det andre bildet er det samme som det første, men med stylingklassen lagt til taggen. Vi setter inn fotografiene i filen ved å bruke nøkkelordet "SRC" og filstien.
Bildet til venstre inneholder alle de originale fargene, som vist i forrige utgang. Imidlertid har den til høyre distinkte fargetoner.
Eksempel 4: Bruke filteregenskapen med opacitet og slipp skyggefunksjoner for å style et bilde i en HTML -fil
I dette eksemplet vil vi bruke filterets eiendoms opacitet og slippe skyggefunksjoner for å endre alle fargene på et bilde. Denne filteregenskapsfunksjonen endrer fargen på et fotografi og konverterer den til et nytt bilde.
I dette skriptet legger vi først filens overskrift for å produsere en stilklasse for bildeelementet på HTML -siden. Vi definerer egenskapen så vel som metoden for å endre fargen på bildet i en klasse. Stilmerket og filens overskrift vil deretter være lukket. Deretter åpner vi kroppskoden og bruker "H2" -merket for å sette inn en overskrift. "IMG" -elementet brukes deretter til å vise de to bildene på skjermen vår. Det første bildet har ingen stylingegenskaper, mens det andre bildet er identisk med det første, men med stylingklassen lagt til taggen. Vi setter inn bilder i filen ved å bruke nøkkelordet "SRC" og filstien. Vi lukker kroppen og HTML -elementene når vi lukker bildekoden.
Bildet til venstre inneholder alle de originale fargene, mens den til høyre har endret toner, som indikert i forrige utgang.
Konklusjon
Vi diskuterte de flere metodene for endring av fargen på et bilde i en HTML -fil ved hjelp av CSS. Den mest brukte CSS -egenskapen er filteregenskapen som har forhåndsdefinerte distinkte funksjoner som kan endre fargen på et bilde og kan gi den et transformert utseende. Vi implementerte flere av disse funksjonene i Notisblokkene ++ miljøet for å få en bedre forståelse av hvordan denne egenskapen fungerer med distinkte funksjoner.