CSS bakgrunnsfarge opacitet
Eksempel nr. 1:
Åpne HTML -filen og lag fire overskrifter i HTML -filen, slik at vi kan bruke bakgrunnsfargen og endre fargen Opacity ved hjelp av CSS. I denne opplæringen bruker vi Visual Code Studio for å kjøre disse kodene til HTML og CSS. Vi oppretter HTML -filen i denne programvaren og skriver HTML. Koden er gitt i følgende bilde:
Dette er bildet av HTML -koden som er nevnt ovenfor. Vi vil endre bakgrunnsfarge -opaciteten til alle overskriftene og vise deg fargen med forskjellige opacitetsverdier.
CSS -kode:
Vi skal lage en CSS -fil der vi bruker CSS -egenskapen for å endre opaciteten til bakgrunnsfargen på overskriftene ovenfor. I denne koden bruker vi "opacitet" -egenskapen til CSS.
For overskrift 1 "H1" setter vi "bakgrunnsfargen" til "gul". "Opaciteten" er "0.4 ”for denne overskriften og skriftfargen er“ svart ”. Overskriften 2 "bakgrunnsfarge" er også "gul", men "opaciteten" her er "0.6 ”. "Bakgrunnsfargen" for overskrift 3 er også "gul", men denne gangen er "opaciteten" "0.8 ”. Nå kommer overskriften 4. Den "bakgrunnsfargen" er den samme som de tidligere overskriftene, men vi bruker ikke fargen "opacitet" her. Så "bakgrunnsfargen" for den fjerde overskriften vises som den originale "gule" fargen.
Produksjon:
Forskjellen i opacitetsverdien til bakgrunnsfargen vises i denne utgangen. Du kan se forskjellen mellom fargens opacitet i dette bildet.
Den første overskriften bakgrunnsfarge viser mer åpenhet fordi opacitetsverdien til bakgrunnsfargen er “0.4 ”. Den andre overskriften er mindre gjennomsiktig enn den første overskriften bakgrunnsfarge siden opacitetsverdien er “0.6 ”. Deretter, det samme som den andre overskriften, er den tredje overskriften bakgrunnsfarge mindre gjennomsiktig enn den andre. Denne gangen er "opaciteten" "0.8 ”. Og i siste overskrift brukte vi den opprinnelige gule fargen uten å bruke noen opacitetsverdi.
Eksempel 2:
I denne HTML -koden har vi to overskrifter og fire avsnitt. Hvert avsnitt er skrevet i henholdsvis "Div" -klassen, og disse "Div" -klassene heter henholdsvis "First", "Second" og "Third". Vi vil bruke disse divnavnene når vi styler disse avsnittet i CSS. Vi vil endre opaciteten til bakgrunnsfargen på hvert avsnitt.
CSS -kode:
Dette er CSS -koden der vi setter fargen på overskriften 1 som "grønn". Teksten til overskriftene 1 og 2 er på linje i "senteret" ved å bruke "tekst-align". Still inn "div" bakgrunnen "grønn" farge ved å bruke "RGB (0, 151, 19)". "Padding" er "10px" fra venstre, høyre, topp og bunn. Den "tekst-align" som brukes her er "rettferdiggjør" . Bruk nå den første diven der vi endret bakgrunnsfargen grønn med opacitetsverdien til “0.2 ”og er skrevet i form av“ RGBA (0, 151, 19, 0.2) ”. "Opacitetsverdien" her er "0.2 ”. "Alpha" -verdien representerer "opaciteten". Den andre divens bakgrunnsfarge er også grønn med alfaverdien til “0.4 ”. Alfaverdien for den tredje div er “0.7 ”med samme grønne farge.
Produksjon:
Her kan du se at første ledd viser mer åpenhet enn andre ledd fordi alfa- eller opacitetsverdien for første ledd er “0.2 ”som betyr at den har“ 20%”opacitet. Andre avsnitts opacitet eller alfaverdi er “0.4 ”og det er mindre gjennomsiktig enn første ledd. I tredje avsnitts bakgrunnsfarge er alfaverdien “0.7 ”og du vil merke at det er mindre gjennomsiktig. I siste avsnitt er bakgrunnsfargen den originale "grønne" fargen. Vi brukte ingen alfaverdi i siste overskrift.
Eksempel nr. 3:
For det tredje eksemplet skal vi skrive forskjellige overskrifter i HTML med "id" og senere bruke disse "id" for å gi forskjellige stiler til disse overskriftene i CSS.
CSS -kode:
I denne CSS -koden vil vi endre bakgrunnsfarge -opaciteten til en farge og også bruke den opprinnelige fargen i neste avsnitt. Se følgende bilde for CSS -koden:
Her bruker vi avsnitts -ID og gir deretter bakgrunnsfargen til alle avsnitt. For “P1” setter vi “RBGA (255, 0, 0, 0.3) ”som er koden til" rød "farge med en alfaverdi på“ 0.3 ”. For “P11” bruker vi samme farge, men uten alfa- eller opacitetsverdien. “P2” er satt som “RGBA (0, 255, 0, 0.4) ”som er koden til" grønn "farge og alfaverdien er" 0.4 ”. Deretter er "P22" av den samme "grønne" fargen uten alfa -verdi. “P3” RGBA -verdien er “(0. 0. 225, 0.5) ”som er den“ blå ”fargen med en alfaverdi på“ 0.5 ”. “P33” har den originale “blå” fargen og har ingen opacitet. “P5” har opacitetsverdien til “0.7 ”og fargekoden er“ RGBA (255, 255, 0, 0.7) ”som representerer“ gul ”. “P55” inneholder ingen alfaverdi. "P6" -fargen er "rosa" med en opacitetsverdi på "0.8 ”og koden er skrevet som“ RGBA (255, 0, 255, 0.8) ”. Det siste avsnittet, "P66", har "bakgrunnsfargen" av "rosa" uten opacitet.
Her er bakgrunnsfargen på første ledd rød, men med en opacitetsverdi på 0.3 som gjør det mer gjennomsiktig. Neste avsnitt inneholder den opprinnelige røde bakgrunnsfargen, og du kan enkelt observere forskjellen mellom den opprinnelige fargen og fargen når vi bruker opacitetsverdien. I tredje ledd vises bakgrunnsfargen som grønn med en opacitetsverdi på “0.4 ”. I fjerde avsnitt er bakgrunnsfargen "grønn" uten alfa -verdi. Den "blå" fargen på femte avsnitt vises og dens opacitetsverdi er "0.5 ”. Den originale "blå" bakgrunnsfargen er også vist i "sjette" avsnitt. Neste avsnitt viser en "grå" farge som brukes med en "0.6 ”opacitetsverdi og denne originale grå brukes også i neste avsnitt som bakgrunnsfarge. Den "gule" fargen har “0.7 ”opacitet mens“ Cerise ”har“ 0.8 ”. Begge originale farger vises også i avsnittets bakgrunnsfarger.
Konklusjon
Denne opplæringen er gitt for deg, slik at du kan lære konseptet med bakgrunnsfarge opacitet i CSS. Vi lærte to metoder for å endre opaciteten: den ene er ved å bruke egenskapen "opacitet", og den andre er ved å bruke "RGBA" der "alfa" brukes til å sette gjennomsiktighetsverdien til bakgrunnsfargen. Vi viste bakgrunnsfargene med opacitet eller alfaverdi og uten opacitetsverdi i detalj. Prøv disse eksemplene og bruk deretter disse opacitetsverdiene i kodene dine.