CSS Academy · Lektion

Gennemsigtighed med opacity og RGBA

Styr elementers gennemsigtighed med egenskaben opacity og rgba()-farveværdier.

Lektion 4 af 413 trin

Gennemsigtighed med opacity og RGBA er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Egenskaben opacity

Egenskaben opacity angiver gennemsigtigheden for hele elementet, inklusive dets underordnede elementer og indhold. Værdierne går fra 0 (helt gennemsigtigt) til 1 (helt uigennemsigtigt).

<div class="overlay">Overlay at 50% opacity</div>

opacity påvirker alle underordnede elementer

En vigtig begrænsning er, at opacity påvirker hele elementtræet. Tekst, billeder og underordnede elementer i et element med opacity: 0.5 bliver alle 50 % gennemsigtige — du kan ikke gøre underordnede elementer mindre gennemsigtige end deres overordnede element.

RGBA til kun gennemsigtig farve

Hvis kun baggrundsfarven skal være gennemsigtig uden at påvirke tekst eller underordnede elementer, skal du bruge rgba() i stedet for opacity:

<div class="card">Card with transparent background, opaque text</div>

Sammenligning af RGBA og opacity

Brug denne mentale model:

opacity: 0.5 — hele elementet og dets underordnede elementer bliver gennemsigtige
rgba(r,g,b,0.5) — kun farveværdien er gennemsigtig; underordnede elementer påvirkes ikke

HSLA-gennemsigtighed

Det samme princip gælder for hsla(). Det fjerde argument er alfakanalen (0–1):

<div class="tooltip">Tooltip with HSLA background</div>

Moderne syntaks med mellemrum

Moderne CSS tillader en skråstreg som separator for alfa i rgb() og hsl() uden "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 sammenlignet med visibility: hidden og display: none

Alle tre skjuler elementer, men på forskellige måder:

opacity: 0 — usynligt, men optager stadig plads og kan klikkes på
visibility: hidden — usynligt, optager plads, men kan ikke klikkes på
display: none — fjernet helt fra layoutet

Overgang med opacity

Da opacity komposit-eredes på GPU'en, er det en af de billigste CSS-egenskaber at animere. Effekter, der toner ind eller ud, bør altid bruge opacity-overgange i stedet for background-color.

<div class="modal visible">Fades in via opacity transition</div>

Mønster til gennemsigtig baggrund

Hvis et element skal have en delvist gennemsigtig baggrund, mens teksten forbliver helt læsbar, skal du bruge rgba() på background-color:

<div class="glass-card">Glass effect card</div>

Alfa i kant og box-shadow

Brug RGBA i border-color og box-shadow til at skabe diskrete, gennemsigtige effekter:

<div class="card">Card with alpha border &amp; shadow</div>

Påmindelse om tilgængelighed

Tekst med lav opacitet er mindre læsbar og opfylder muligvis ikke WCAG-kravene til farvekontrast. Kontrollér altid kontrastforholdene, når du bruger gennemsigtighed på tekst. Sørg for et forhold på mindst 4,5:1 for normal tekst.

Hurtig kontrol

Et element har opacity: 0.3. Hvad sker der med teksten i det?

Besvar den i den interaktive lektion

Opsummering

opacity gør et helt element og dets underordnede elementer gennemsigtige. Brug rgba() eller hsla() til gennemsigtige farver uden at påvirke underordnede elementer. Opacity-overgange accelereres af GPU'en og har god ydeevne. Kontrollér altid kontrastforholdene, når du bruger gennemsigtighed på tekst.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Gennemsigtighed med opacity og RGBA” gratis?

Ja — hele teksten til “Gennemsigtighed med opacity og RGBA” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Gennemsigtighed med opacity og RGBA”?

Styr elementers gennemsigtighed med egenskaben opacity og rgba()-farveværdier. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Gennemsigtighed med opacity og RGBA”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til CSS Academy