CSS Academy · Lektion

Opacitet och RGBA-transparens

Styr elements transparens med egenskapen opacity och RGBA-färgvärden.

Lektion 4 av 413 steg

Opacitet och RGBA-transparens är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Egenskapen opacity

Egenskapen opacity anger hela elementets transparens, inklusive dess underordnade element och innehåll. Värdena sträcker sig från 0 (helt transparent) till 1 (helt ogenomskinligt).

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

opacity påverkar alla underordnade element

En viktig sak att tänka på är att opacity påverkar hela elementträdet. Text, bilder och underordnade element inuti ett element med opacity: 0.5 blir alla 50 procent transparenta — du kan inte göra underordnade element mer ogenomskinliga än sitt överordnade element.

RGBA för enbart transparent färg

Om du vill göra endast bakgrundsfärgen transparent utan att påverka text eller underordnade element använder du rgba() i stället för opacity:

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

Jämförelse mellan RGBA och opacity

Tänk så här:

opacity: 0.5 — hela elementet och dess underordnade element blir transparenta
rgba(r,g,b,0.5) — endast färgvärdet blir transparent; underordnade element påverkas inte

Transparens med HSLA

Samma princip gäller för hsla(). Det fjärde argumentet är alfakanalen (0–1):

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

Modern syntax med mellanslag

Modern CSS tillåter ett snedstreck som avgränsare för alfa i rgb() och hsl(), utan "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 jämfört med visibility: hidden och display: none

Alla tre döljer element, men på olika sätt:

opacity: 0 — osynligt, men tar fortfarande plats och kan klickas
visibility: hidden — osynligt, tar plats men kan inte klickas
display: none — tas bort helt från layouten

Övergång med opacity

Eftersom opacity sammansätts på GPU:n är det en av de billigaste CSS-egenskaperna att animera. Effekter för intoning och uttoning bör alltid använda övergångar för opacity i stället för background-color.

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

Mönster för transparent bakgrund

Om du vill ge ett element en genomskinlig bakgrund och samtidigt behålla texten helt läsbar använder du rgba() på background-color:

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

Alfa i kant och box-skugga

Använd RGBA i border-color och box-shadow för att skapa subtila, transparenta effekter:

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

Påminnelse om tillgänglighet

Text med låg opacitet försämrar läsbarheten och kan göra att WCAG:s krav på färgkontrast inte uppfylls. Kontrollera alltid kontrastförhållandet när du använder transparens på text. Säkerställ ett kontrastförhållande på minst 4.5:1 för normal text.

Snabbtest

Ett element har opacity: 0.3. Vad händer med texten inuti det?

Besvara frågan i den interaktiva lektionen

Sammanfattning

opacity gör hela elementet och dess underordnade element transparenta. Använd rgba() eller hsla() för transparenta färger utan att påverka underordnade element. Övergångar med opacity GPU-accelereras och ger god prestanda. Kontrollera alltid kontrastförhållandet när du använder transparens på text.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Opacitet och RGBA-transparens” gratis?

Ja – hela texten till ”Opacitet och RGBA-transparens” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Opacitet och RGBA-transparens”?

Styr elements transparens med egenskapen opacity och RGBA-färgvärden. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Opacitet och RGBA-transparens”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy