CSS etter bilde
Denne opplæringen vil vise deg hvordan du legger til et bildeoverlegg ved hjelp av "etter" pseudo-element i CSS. Vi vil legge til bildeoverleggseffekten ved hjelp av "etter" pseudo-element.
Eksempel nr. 1:
For å bruke "etter" pseudo-element i CSS, oppretter vi en HTML-fil. Koden vi skriver i HTML -filen er gitt i dette eksemplet. Du kan bruke tekstredigereren du vil og begynne å kode den. Skriv koden som presenteres i følgende bilde. Vi skriver denne koden i programvaren Visual Studio Code. Ved å velge HTML -språket i denne nye filen, skriver vi bare “!”. Trykk på Enter, så vises de nødvendige kodene automatisk på denne filen. Begynn å kode i kroppen.
Vi oppretter en "seksjon" -klasse som heter "Banner" og legger en overskrift inne i dette "banneret". Vi kobler også denne HTML med CSS -filen, så alle stylingene vi gjør i CSS -filen vil bli brukt på denne HTML -koden. Vi lagrer det med “.HTML ”Fil Extension.
CSS -kode:
I denne CSS-koden bruker vi "etter" pseudo-element for å lage bildeoverlegg. For "etter" pseudo-element må vi ha innholdet, så vi legger "innholdet" her. Vi lager et element i "banneret" etter bannerets innhold. Nå lager vi "displayet" "blokkeringen" og gir "posisjonen" til dette banneret som "absolutt". "Toppen" og "venstre" er begge "0". Deretter setter vi "bredden" til "100%" den samme som "høyden" med "100%" verdi. Vi bruker "lineær gradient" for "bakgrunnsbildet" for å gjøre bildet mer attraktivt. Vi gir en "120deg" til dette og legger to farger på denne eiendommen. Deretter setter vi dens "opacitet" og satte “0.7 ”verdi for dette. Vi bruker z-indeksverdien her og legger “0” for dette.
Deretter setter vi posisjonen til "banneret" til "slektning". Vi bruker også bakgrunnsbildet inne i banneret. "Polstringen" vi satte for dette er "20VH" for både "topp" og "bunn", og "0" for "venstre" og "høyre". Vi setter "dekselet" for "bakgrunnsstørrelse" og "tekst-align" til "senteret". Nå bruker vi banneret og velger alle elementene i banneret ved hjelp av “*” -velgeren. Når vi bruker denne "*" -velgeren, får den alle elementene og bruker stylingen som vi legger inn i den på alle elementene. Når vårt overlegg dekker både teksten og bildet, bruker vi "Z-indeksen" for å løse dette, og vi setter innholdet "Z-Index" til "10". Og sett "slektningen" for sin "posisjon".
Vi setter innholdsfargen til "svart" slik at innholdet skrevet inne i banneret virker svart på bildet. Vi "justerer" overskriften "til" senteret "og bruker" algeriske "font-familiens for denne overskriften. Vi setter også størrelsen til "40px".
Produksjon:
Du kan få utdataene på standard nettleseren når du trykker på “Alt+B” eller klikker på høyre museknapp på HTML -filen og velger deretter “Åpne i standard nettleser”. Den gitte utgangen vil gjengi i nettleseren.
Eksempel 2:
Her har vi et annet eksempel der vi lager overlegget av bildet ved å bruke den samme pseudo-elementet og endre koden vår litt og vise deg hvordan den fungerer.
HTML -koden er den samme for dette eksemplet. Men her endrer vi overskriften som er skrevet inne i banneret. Vi skiller denne overskriften i to linjer ved å bruke "
" stikkord.
Først satte vi overskriften litt ved å bruke noen stilegenskaper på det. Vi setter "tekst-align", "fontstørrelse" og "font-family" av overskriften. Deretter kommer "etter" pseudo-selector som skaper et overlegg mellom bildet og teksten. Hver gang vi bruker denne "etter" -velgeren i CSS, må vi definere "innholdet" først. Etter dette satte vi "displayet" til "blokkerer". "Topp" og "venstre" -verdiene som vi legger her, er satt til "0". Mens "bredde" og "høyde" -verdiene er satt til "100". Vi bruker deretter "Linear-Gradient" og velger to farger for dette som er "rosa" og "blå". Også "opacitet" -egenskapen brukes her for å gi et gjennomsiktig syn på bakgrunnsbildet. Vi setter verdien til “0.6 ”. Vi bruker “bakgrunnshulety.jpg ”som bakgrunnsbilde for dette. Vi plasserer dette bildetavnet i "bakgrunnsbilde" -egenskapen "URL".
Deretter bruker vi polstringen for å lage rommet og sette sin "topp", "bunn", "høyre" og "venstre" verdier ved hjelp av en "polstring" -egenskap. Her definerer "200VH" "toppen" og "bunn" -polstring og "0" definerer "venstre" og "høyre" polstring. "Bakgrunnsstørrelsen" er "deksel" som vi brukte i vårt første eksempel. Deretter setter vi "banneret" og "z-indeks". For dette bruker vi først "etter" pseudo-element. Inne i dette setter vi “-index” til “1”. Det gir en "1" z-indeks til overlegget. Under dette setter vi "Z-indeksen" for "innholdet" og bruker "10" for innholdet Z-indeks. Vi bruker "*" -velgeren med "banneret" før vi gir en Z-indeks til bannerinnholdet. Denne Z-indeksen gjelder alt innholdet som er skrevet i banneret. Vi bruker også "mix-blend-modus" for overlegget som vi tidligere har laget. Denne egenskapen "Mix-Blend-Mode" hjelper til med å blande flere elementer.
Når vi bruker denne egenskapen med overlegget vårt, skaper det noen fantastiske nye kombinasjoner for oss. Vi kan gjøre overlegget vårt til et avansert overlegg ved å bruke dette "Mix-Blend-Eiendoms" i CSS. Etter å ha fullført denne koden, må vi lagre den med en ".CSS ”Fil Extension, da det er CSS -filen.
Produksjon:
Konklusjon
Vi diskuterte "etter" pseudo-element i CSS for å lage overleggsbildet i denne opplæringen. Vi lærte at overlegget er opprettet mellom bakgrunnsbildet og teksten slik at vi kan velge teksten, noe som betyr at teksten er atskilt fra bildet. Vi brukte "mix-blend-eiendom" på disse bildeoverleggene for å gjøre dem mer attraktive. Vi undersøkte også de forskjellige eksemplene og forklarte disse eksemplene i denne opplæringen. Vi ga alle detaljer i denne opplæringen som er nødvendig for deg å forstå denne "etter" pseudo-element i CSS. Nå kan du lage disse overleggene på prosjektene dine etter å ha forstått disse eksemplene som vil hjelpe deg mye i din fremtidige koding.