CSS bakgrunnsbilde opacitet uten å påvirke teksten
Eksempel 1
For å endre bakgrunnsbildet opacitet uten å påvirke teksten, må vi skrive litt HTML -kode og endre opaciteten i CSS -koden. Vi bruker den visuelle studiokoden for å gjøre disse eksemplene. Så vi åpner den nye filen i denne programvaren og velger språket “HTML”, og en HTML -fil opprettes. Deretter begynner vi koding i denne filen. Etter å ha fullført koden vår, lagrer vi den, og ".HTML ”File Extension genererer automatisk dette filnavnet.
Vi lager en "div" -klasse "demo-wrap" ved hjelp av en bildekode. Bildeklassen vi bruker er “IMG-BG”. Nå må vi sette bildet på bakgrunnen, så vi bruker "Bakgrunn-IMG SRC" og legger navnet på bildet vi ønsker å vise som bakgrunnsbilde. Her setter vi “naturen.JPG ”-bilde som bakgrunnsbilde. Vi har også en annen "div" inne i den første diven, og navnet på denne diven er "tekst". Og i den andre diven har vi en overskrift “H1” og skriver en overskrift i denne “Div”. Så lukk begge “div” -merker.
CSS -kode
I den gitte CSS -koden endrer vi opaciteten til bakgrunnsbildet, men tekstoverskriften som vi skriver på dette bildet forblir den samme. Bakgrunnsbildet Opacitet endrer ikke tekstenes opacitet.
Vi bruker "IMG-BG", som er navnet på bildeklassen, og setter bildets opacitet som "0.4 ”. Vi setter bakgrunnsbildet "posisjon" til "absolutt". "Venstre" og "toppen" er begge satt til "0". "Bredden" vi setter her er "100%" for bakgrunnsbildet, og "høyden" er "Auto". Deretter designer vi teksten vår når vi justerer den i "senteret" og setter sin "font-familie" til "Algerie". Vi bruker "svart" som fargen på skriften.
Produksjon
Du kan se at bildet på bakgrunnen ikke er i sin opprinnelige farge fordi vi bruker “0.4 ”opacitet på dette bakgrunnsbildet. Det er imidlertid ingen effekt på teksten skrevet på bildet. På denne måten kan vi endre bildens opacitet uten å påvirke teksten.
Eksempel nr. 2
Ved å endre den forrige HTML -koden, opprettet vi et annet eksempel. Men denne gangen la vi til bildet ved hjelp av CSS -egenskaper.
Denne filen definerer to overskrifter i "Div" -klassen. Vi har “H1” og “H2” i Div -klassen som heter “Hero” i denne koden. Vi vil legge til bakgrunnsbildet i CSS -koden gitt nedenfor.
CSS -kode
Posisjonen til Div -klassen “Hero” er “relativ”, høyden er “90VH”, og bredden er “90%”. Displayet for denne Div-klassen “Hero” er “Flex”, element i “Center”, og “Justify-Content” til “Center”. “:: før” er “pseudo-selector” som brukes til å plassere bakgrunnsbildet før det valgte elementet. Vi legger "innhold", setter "bakgrunnsbildet" ved hjelp av "URL" og setter navnet på bildet i denne URL-en. "Bakgrunnsstørrelsen" setter bildet av bakgrunnen til "omslag", og "posisjonen" er "absolutt". Så er "toppen", "bunnen", "venstre" og "høyre" alle "0px". Her endrer vi “opacitet” til “0.4 ”. Nå bruker vi stilen på overskriftene. Overskriften "posisjon" vi satte er "relativ". Overskriftsfargen er "rød". Størrelsen på denne overskriften er "25px", og "linjehøyden" er "0.9 ”. Vi justerer denne overskriften til "senteret". Fargen på den andre overskriften er "svart".
Produksjon
Her vises ikke bakgrunnsbildet i sin opprinnelige farge, da vi har satt bildets opacitet i CSS -koden. Men teksten på bildet vises i den opprinnelige fargen.
Eksempel nr. 3
Vi oppretter en annen HTML -fil. I denne koden lager vi tre avsnitt i DIV -klassen, og DIV -klassen vi har laget heter “ImageOPC”.
CSS -kode
Vi skal sette inn bakgrunnsbildet i CSS -koden. Så vi bruker "før" pseudo-selector, som vi har motarbeidet i forrige eksempel. Her er koden den samme som i det andre eksemplet, men vi endrer bakgrunnsbildet og bruker "opacity" -egenskapen på et annet bilde. Her er "venstre", "høyre", "bunn" og "topp" alle satt til "0". Og “0.4 ”av opaciteten brukes til dette bildet. Vi setter avsnittet i "relativ" stilling. Og setter høyden lik “0.9px ”. Vi endrer også "skriftstørrelsen" på avsnittet og setter dette til "25px". Den "algeriske" fontfamilien brukes til avsnittet. Og vi satte toppen "200px".
Produksjon
Du kan se at bakgrunnsbildet viser en viss åpenhet. Her bruker vi 40% opacitet på dette bakgrunnsbildet, men du kan merke at det ikke påvirker teksten skrevet på bakgrunnsbildet.
Eksempel 4
Vi gjør mindre endringer i forrige HTML -kode. I dette eksemplet bruker vi fire avsnitt i "Div" og "GiveGivingAgeOPC" -navnene for denne DIV -klassen.
CSS -kode
Denne CSS -koden er den samme som forrige kode. Vi endrer imidlertid "URL" i bakgrunnsbildet. Vi bruker “bakgrunnshulety.JPG ”-bilde her. Husk at du bruker riktig bildeutvidelse med navnet på bildet. Du må legge riktig vei til bildet i denne "URL". Vi bruker “0.5 ”verdi for opaciteten til bakgrunnsbildet i dette tilfellet. "Font-size" vi bruker er "30px" i dette eksemplet for avsnittet. Vi setter avsnittet Font-Family til “Times New Roman”, og på toppen av dette er “200px”. Avsnittet vises i “Maroon” og er “dristigere” i “Font-Weight”.
Produksjon
Dette bakgrunnsbildet viser 50% opacitet når vi setter verdien til “0.5 ”, men teksten forblir den samme. Denne opacitetsverdien gjelder ikke for teksten.
Konklusjon
Vi har presentert denne guiden hvor vi endrer opaciteten til bakgrunnsbildet uten å påvirke teksten. Dermed kan du bestemme hvordan du endrer bakgrunnsbilde opacitet i CSS uten å påvirke teksten. Vi har forklart og vist forskjellige eksempler der vi bruker "opacitet" -egenskapen for å endre bakgrunnsbildet opacitet, men teksten forblir den samme. Etter å ha lært denne guiden, kan du sette inn bakgrunnsbildene i prosjektene dine og angi bakgrunnsbilde opacitet uten å påvirke teksten ved hjelp av CSS -egenskapen.