Hvordan sette bakgrunn opacitet i CSS

Å sette opp bakgrunner i webapplikasjoner er en vanlig operasjon som tiltrekker brukerens øyne. Noen ganger kan det imidlertid føre til en stor distraksjon. For å unngå en slik situasjon, gjør nettutviklere deres bakgrunn gjennomsiktige ved å bruke opacitet eller bruke CSS alternative egenskaper for opacitet.

I denne guiden vil vi dekke hvordan du setter bakgrunns opacitet i CSS.

Hvordan sette bakgrunn opacitet i CSS?

I CSS forholder bakgrunnen opacitet seg til følgende vilkår:

• • Bakgrunnsbilde opacitet
  • bakgrunnsfarge opacitet

Vi vil nå forklare begge deler individuelt!

Hvordan du angir bakgrunnsbilde opacitet i CSS?

“Opacitet”Eiendom kan brukes til å gjøre bilder gjennomsiktige i bakgrunnen eller hvor som helst på nettsiden. Tekster og bakgrunnsfarger kan også gjøres gjennomsiktige ved bruk av denne egenskapen.

Sjekk ut det oppgitte detaljerte eksemplet for å vite mer om å sette bakgrunnsbilde opacitet i CSS.

Eksempel

For øyeblikket har vi et bilde som er satt i bakgrunnen for containeren vår:

I vår HTML -fil har vi lagt til en tag med "My-img”Id i kroppsdelen:

For å sette bakgrunnsbildet opacitet, må vi style vårt bildeelement. For å gjøre det, bruk "#”Før ID navngitt“My-img" som "#MY-IMG”For å style det. Siden bildet vil bli brukt i bakgrunnen til den valgte beholderen, gi litt plass til beholderen ved å bruke "polstring”Av“15%”. I neste trinn, sett bildet som bakgrunn ved å bruke "bakgrunn”Eiendom; spesifiser “Ingen repeter”Verdi langs”URL ()”Verdi for å unngå repetisjon av bilde. Til slutt, sett opaciteten som verdi “0.2”Eller i henhold til dine preferanser:

Lagre koden og åpne HTML -filen i nettleseren i nettleseren. I vårt tilfelle vil vi åpne den ved hjelp av "Live server”:

Her har opaciteten på bildet vårt blitt brukt vellykket:

La oss ta turen mot neste avsnitt!

Hvordan du angir bakgrunnsfarge opacitet i CSS?

Det er alltid sjanser for at du kan finne solide eller gradientfarger i nettstedets bakgrunn. For bakgrunnsfarger 'opacitet, vil vi bruke the “bakgrunnsfarge“Eiendom. Denne egenskapen hjelper til med å sette opp bakgrunnsfargen; Imidlertid kan det også brukes til å angi bakgrunnsfargeres opacitet eller gjøre dem gjennomsiktige.

Se på eksemplet nedenfor for bruk av den oppgitte eiendommen.

Eksempel 1: Bruke egenskap for bakgrunnsfarge for å sette et bilde-opacitet

I dette eksemplet er bakgrunnsfargen på websiden vår oransje, og vi må angi dens opacitet:

For å gjøre det, vil vi bruke hex -fargekoden med "bakgrunnsfarge”Eiendom. Ved hjelp av en spesifikk sekskantfarge vil vi bruke opaciteten på bakgrunnsfargen:

Merk: Endre “#00000020”Verdi til“#00000000”Vil gjøre bakgrunnen din helt gjennomsiktig.

Lagre koden ved å trykke på “Ctrl + s”Og åpne den med live -serveren:

Produksjon

La oss nå ta et mer interessant eksempel på å sette bakgrunnsfarge opacitet i CSS.

Eksempel 2: Bruke egenskap for bakgrunnsfarge for å gjøre et bilde gjennomsiktig

I dette eksemplet vil vi bruke “bakgrunn”Eiendom og setter verdien til“gjennomsiktig”. Som et resultat vil bakgrunnen være gjennomsiktig, men fortsatt en del av beholderen:

Her kan vi se den helt gjennomsiktige bakgrunnen:

For verifiseringen, inspiser de ekstra elementene i beholderen:

Vi har levert de enkleste måtene å sette bakgrunn opacitet.

Konklusjon

For å sette bakgrunns opacitet, bruk "Opacitet”,“bakgrunnsfarge”, Eller“bakgrunn”Eiendom. Opaciteten gir kontroll over innstilling av bakgrunns opacitet. Bakgrunnsfargegenskapen kan bidra til å anvende transparensen til bakgrunner via hex-fargekode, mens bakgrunnseiendommen er grei; Å sette den til gjennomsiktig vil gjøre at bakgrunnen forsvinner. I denne artikkelen har vi demonstrert hvordan du kan sette bakgrunns opacitet i CSS.