En webside er laget av to grunnleggende front-end språk: HTML og CSS. Alle objektene på websiden som er opprettet i HTML -kroppen er stylet gjennom CSS. Fargen er en grunnleggende egenskap til CSS som også brukes på alle objektene enten på teksten eller på bildet.

CSS-stilarket har en innebygd funksjon som brukes til å invertere fargene til innholdet i HTML-kroppen. Denne artikkelen vil inneholde en forklaring angående fargevinsjon av teksten og bildet også. Den grunnleggende syntaks for inversjonsfunksjonen er:

Inverter (beløp brukt på objektet)

Denne enkeltparameteren inneholder mengden i prosent i hvilken grad inversjonen av farger skal gjøres. Verdien av denne funksjonen for det originale bildet er 0%. Mens verdien av inversjonsfunksjonen er 100%, er fargene omvendt. Verdien på 50% viser at bildet vil være en helt solid grå farge fordi alle pikslene er dekket med grå farge.

Eksempel 1: CSS inverterer fargen på teksten:

I dette eksemplet vil vi se hvordan fargene på teksten på nettsiden endres ved å bruke inversjonsfunksjonen. Før vi beveger oss mot kodene, vil vi vise det originale bildet av websiden som vi vil bruke effekten av den omvendte fargefunksjonen.

Denne websiden dannes ganske enkelt ved å bruke HTML- og CSS -koder. Overskrifter

og

, og

er HTML -kroppskodene som er ansvarlige for disse tekstene som vises på websiden. Mens CSS inneholder skriftfargen som brukes på dem fordi standard fontfargen alltid er svart i HTML.

Vurder nå en enkel HTML -kode som brukes til å designe denne siden. Inne i kroppsdelen, en overskrift

er erklært. For å bruke invert -funksjonen på teksten, har vi brukt intern CSS for styling. Som vi er kjent med alle typer CSS, er intern CSS erklært ved å bruke stilkoden, inne i hodet på HTML -koden. Denne stylingen gjøres ved å bruke ID -er og klasser i stilkoden. Disse klassene og IDene får tilgang til gjennom navnene sine skrevet i innholdskodene til HTML.

For eksempel, inne i overskriften, har vi brukt et klasses nøkkelord med navnet på klassen som er "invert_effect". Denne klassen er erklært inne i stildelen.

1

.. .

Lignende effekt brukes på

og avsnittet.

Etter det, lukk HTML -kroppskodene. Stilmerket vil inneholde stilen for begge overskriftene. Denne effekten er skriftfargen. Begge overskriftene har forskjellige farger.

1 2 3 4 5

H1 Farge: lilla;

Tilsvarende er avsnittet også stylet ved å legge fontfarge til det. Deretter har vi brukt en effekt på kroppen for å vise alt innholdet i HTML midt på websiden. Justering gis hele innholdet i HTML -kroppsdelen.

Etter det er hovedeffekten som er fargevendsfunksjonen () definert som en klasse.

1 2 3 4

.invert_effect Filter: inverter (100%);

Klassen er erklært med full stopp i starten, noe som er identiteten til klassen.

Ved å bruke denne funksjonen vil alle fargene på teksten til overskrifter og avsnitt bli endret. Alle de originale fargene er filtrert. Fargene som er igjen blir vist. Vi har brukt inverteringsprosenten som 100%. Eller alle fargene blir omvendt grundig.

Lukk stilkoden. Lagre deretter tekstfilen med .HTML -utvidelse for å åpne filen med både notisblokken i tekstformatet og nettleseren i form av websiden.

Når websiden er lastet i nettleseren, vil du se at fargene på hele tekstorganet endres. Dette er på grunn av den omvendte funksjonen som brukes på teksten.

Eksempel 2: CSS inverterer fargen på bildet:

Etter å ha brukt den omvendte fargeeffekten på teksten, vil vi bruke dette filteret på bildet. I forrige eksempel var det veldig få farger som ble brukt i HTML -tekstinnholdet. Men nå har vi brukt et bilde med en rekke farger for å bruke den inverterte fargefunksjonen på det bildet. La oss ha et eksempel på jpeg-bilde med flerfargede blomster. JPEG er et format av bilde som inneholder en bakgrunn med det. Bildet nedenfor har en hvit bakgrunn.

Dette bildet vil bli brukt i koden for å bruke inverterfunksjonen på den. Først må du vurdere HTML -kroppsdelen. Inne i kroppskoden har vi brukt den samme overskriften med et bilde. Et bilde brukes på websiden ved å gi kilden til bildet. Plasseringen er enten PC eller Internett også. Vi har brukt den nedlastede filen.

1

Bildekoden inneholder navnet på klassen for å anvende invert -effekten på den. Å bevege seg mot CSS -delen, er stilen for overskriften den samme. Bildet er stylet ved å gi de proporsjonale dimensjonene til bildet inkludert bildehøyde og bredde. Invert_effect -klassen vil også ha den samme filtrerte verdien som skal brukes på bildet.

Lagre koden og utfør HTML -filen i nettleseren. Du vil se at alle fargene som opprinnelig er til stede på blomstene, er endret. Bakgrunnsfargen påvirkes også av inverterfunksjonen.

På denne måten brukes filteret til inverteringsfunksjonen på alle fargene enten i vanlig tekst eller på bildene også.

Ytterligere informasjon:

Den grå fargen er ansvarlig for inversjonen av fargene. Så for et eksperiment har vi redusert inverterverdien til 38%, for å se hva resultatene vil være.

1 2 3 4

.invert_effect Filter: inverter (38%);

Utgangen har det originale bildet med et uklart lag med gråaktig farge som har gjort bildet mellom den originale og omvendte tilstanden.

Konklusjon:

CSS Inververt farge er en funksjon som avhenger av fargene på HTML -objektet. For å gi objektet ditt et unikt spekter av farger, bruker vi denne funksjonen. I begynnelsen av opplæringen forklarte vi hva denne funksjonen er ved å gi syntaks og parameter. Deretter brukte vi to grunnleggende eksempler for å utdype riktig arbeid av inversjonsfunksjonen i CSS. Denne egenskapen er relatert til filteret til farger, der alle fargene endres ved å gi det angitte beløpet. Vi har brukt filtereffekten på både teksten og bildet også for å gi brukeren den enkleste måten å bruke inverterfunksjonen til CSS.