I nettutvikling kan du ofte føle behov for å legge til gjennomsiktig bakgrunn. Å søke etter den gjennomsiktige bakgrunnseiendommen i CSS vil ikke gi deg noen resultater, da det ikke er noen slik transparent-background-eiendom. Du kan imidlertid bruke alternative egenskaper eller den gjennomsiktige fargekoden for samme formål.

I denne bloggen vil vi lære om å sette den gjennomsiktige bakgrunnsfargen i CSS.

Hvordan du angir gjennomsiktig bakgrunnsfarge i CSS?

For å angi den gjennomsiktige bakgrunnsfargen, skal vi bruke følgende metoder:

• Bakgrunnsfarge eiendom
• Opacitetseiendom

La oss gå gjennom hver metode en etter en!

Metode 1: Bruke bakgrunnsfarge for å angi gjennomsiktig bakgrunnsfarge i CSS

I CSS, “bakgrunnsfarge”Eiendom brukes til å tildele en annen farge til bakgrunnen. Dessuten kan bruk av bakgrunnsfargede egenskaper på en bestemt måte også sette gjennomsiktigheten til forskjellige elementer.

Eksempel

Her er vår HTML -side med to bakgrunner, den ene som et bilde og den andre som beholderens bakgrunn. Vi ønsker å lage containerens bakgrunn gjennomsiktig slik at vi kan se gjennom det ekstra bildet på grunn av beholderens gjennomsiktighet:

I HTML -filen vår har vi lagt til en "

”Tag med en klasse som heter”BG”Inne i et divelement og plasserte det inne i“" stikkord:

Gjennomsiktig

I CSS -filen bruker du “." før "BG”Å erklære det som en klasse. Legg deretter til bakgrunnsfargede egenskaper sammen med RGBA-verdien, tilordne “100px”Polstring, og angi tekstfargen som“hvit”. Ettersom RGBA -fargevalget har sitt riktige format, vil vi sette alle verdiene til null bortsett fra den siste. Sett den siste verdien til “.25”For å få en gjennomsiktighetsskygge. Imidlertid kan det erstattes med "0”Å ha en klar åpenhetsskygge.

I neste trinn, tilordne div en polstring “200px”Og angi nettadressen til ønsket bakgrunnsbilde:

Merk: Vi har ikke fjernet bakgrunnsfargen som tidligere er satt som "Aqua”. Som et resultat vil den gjennomsiktige bakgrunnen til beholderen være tydelig synlig ved å bruke RGBA -fargeskjemaet.

Som du ser, har vi med hell satt gjennomsiktig bakgrunnsfarge ved hjelp av bakgrunnsfargede eiendommer.

La oss nå sjekke metoden for å bruke en annen CSS -egenskap for å sette en gjennomsiktig bakgrunnsfarge.

Metode 2: Bruke opacity -egenskap for å angi gjennomsiktig bakgrunnsfarge i CSS

I CSS, “Opacitet”Eiendom brukes til å gjøre elementene gjennomsiktige. Imidlertid er det alltid nivåer av åpenhet som kan spesifiseres, for eksempel 1 - 100 (%). For eksempel et element med "0”Opacitet vil være helt gjennomsiktig.

Eksempel 1

I dette eksemplet vil vi tildele "0.2”Opacitetsverdi til“.BG”Klasse. Alle de andre egenskapene vil forbli de samme:

Her har vi med hell satt den gjennomsiktige bakgrunnen:

Imidlertid anvendte det å sette opaciteten også gjennomsiktighetseffekten på den ekstra teksten. For å takle et slikt scenario, la oss ta et annet eksempel.

Eksempel 2

Når du tildeler en opacitetsverdi, brukes den på hvert element i den spesifiserte beholderen som har samme klasse. Å endre klassen til den ekstra teksten kan imidlertid løse det uttalte problemet.

For å gjøre det, vil vi tildele klassen “tekst" til

Tag og klasse “BG”Til taggen:

Gjennomsiktig

Nå, “Gjennomsiktig”Tekst tilhører en annen klasse”.tekst”. Så vi vil spesifisere dens “posisjon”Og gi den verdien”Absolutt”, Tildel“margin-topp”Eiendomsverdi som“-9%”Og“margin-venstre”Verdi som“50px”For å få teksten på boksen:

.tekst
Posisjon: Absolutt;
Margin -topp: -9%;
margin-venstre: 50px;
Farge: Hvit;

Det kan sees at nå blir opaciteten bare brukt på beholderen for å gjøre den gjennomsiktig uten å endre den ekstra teksten:

Vi har gitt ut de enkleste måtene å sette den gjennomsiktige bakgrunnsfargen i CSS.

Konklusjon

For å angi gjennomsiktig bakgrunnsfarge i CSS, kan du bruke "bakgrunnsfarge”Eiendom med RGBA -verdien og“Opacitet”Eiendom. Bakgrunnsfargegenskapen kan brukes to ganger, en for å sette den opprinnelige bakgrunnen og den andre for å gjøre den første gjennomsiktige ved hjelp av RGBA-fargevalget. Imidlertid brukes opacitetsegenskapsverdien på alle elementer i den spesifikke klassen som den er definert. I denne artikkelen har vi dekket to effektive metoder for å angi den gjennomsiktige bakgrunnsfargen i CSS.