Opasitet og RGBA-gjennomsiktighet
Styr gjennomsiktigheten til elementer med egenskapen opacity og RGBA-fargeverdier.
Opasitet og RGBA-gjennomsiktighet er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Egenskapen opacity
Egenskapen opacity angir gjennomsiktigheten til hele elementet, inkludert underordnede elementer og innhold. Verdiene går fra 0 (helt gjennomsiktig) til 1 (helt ugjennomsiktig).
<div class="overlay">Overlay at 50% opacity</div>
opacity påvirker alle underordnede elementer
Et viktig forbehold er at opacity påvirker hele elementtreet. Tekst, bilder og underordnede elementer i et element med opacity: 0.5 blir alle 50 % gjennomsiktige — De kan ikke gjøre underordnede elementer mer ugjennomsiktige enn forelderen.
RGBA for kun gjennomsiktig farge
For å gjøre bare bakgrunnsfargen gjennomsiktig uten å påvirke tekst eller underordnede elementer bruker De rgba() i stedet for opacity:
<div class="card">Card with transparent background, opaque text</div>
Sammenligning av RGBA og opacity
Bruk denne huskeregelen:
opacity: 0.5— hele elementet og underordnede elementer blir gjennomsiktigergba(r,g,b,0.5)— bare fargeverdien er gjennomsiktig; underordnede elementer påvirkes ikke
Gjennomsiktighet med HSLA
Det samme prinsippet gjelder for hsla(). Det fjerde argumentet er alfakanalen (0–1):
<div class="tooltip">Tooltip with HSLA background</div>
Moderne syntaks med mellomromsseparasjon
Moderne CSS tillater en skråstrek som skilletegn for alfa i rgb() og hsl() uten a-varianten:
<div class="modern-rgb">rgb(0 0 0 / 0.5)</div>
<div class="modern-hsl">hsl(0 0% 0% / 0.5)</div>
opacity: 0 kontra visibility: hidden kontra display: none
Alle tre skjuler elementer, men på ulike måter:
opacity: 0— usynlig, men tar fortsatt plass og kan klikkes påvisibility: hidden— usynlig, tar plass, men kan ikke klikkes pådisplay: none— fjernes helt fra layouten
Overgang med opacity
Fordi opacity settes sammen på GPU-en, er det en av de minst kostbare CSS-egenskapene å animere. Inn- og uttoning bør alltid bruke overganger med opacity i stedet for background-color.
<div class="modal visible">Fades in via opacity transition</div>
Mønster for gjennomsiktig bakgrunn
For å gi et element en gjennomskinnelig bakgrunn samtidig som teksten forblir fullt lesbar, bruker De rgba() på background-color:
<div class="glass-card">Glass effect card</div>
Alfa i kantlinje og box-shadow
Bruk RGBA i border-color og box-shadow for å lage subtile, gjennomsiktige effekter:
<div class="card">Card with alpha border & shadow</div>
Påminnelse om tilgjengelighet
Tekst med lav opasitet reduserer lesbarheten og kan føre til at WCAG-kravene til fargekontrast ikke oppfylles. Kontroller alltid kontrastforholdene når De bruker gjennomsiktighet på tekst. Sørg for et minimumsforhold på 4.5:1 for normal tekst.
Hurtigsjekk
Et element har opacity: 0.3. Hva skjer med teksten inni det?
Oppsummering
opacity gjør et helt element og dets underordnede elementer gjennomsiktige. Bruk rgba() eller hsla() for gjennomsiktige farger uten å påvirke underordnede elementer. Overganger med opacity akselereres av GPU-en og gir god ytelse. Kontroller alltid kontrastforholdene når De bruker gjennomsiktighet på tekst.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Opasitet og RGBA-gjennomsiktighet» gratis?
Ja – hele teksten i «Opasitet og RGBA-gjennomsiktighet» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Opasitet og RGBA-gjennomsiktighet»?
Styr gjennomsiktigheten til elementer med egenskapen opacity og RGBA-fargeverdier. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Opasitet og RGBA-gjennomsiktighet»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Fargeverdier: Navn, heksadesimal, RGB, HSL
- Bakgrunnsfarge og bakgrunnsbilde
- Gradienter: Lineære og radiale
- Opasitet og RGBA-gjennomsiktighet