Gör bakgrunder genomskinliga

Transparens gör att element kan avslöja vad som ligger bakom dem. Den här guiden beskriver hur du uppnår transparenta bakgrunder i vanliga scenarier.

Metoder för att uppnå transparens

Transparens styrs vanligtvis med färgvärdena opacitet eller rgba()/hsla().
opacitet påverkar hela elementet, inklusive dess innehåll.
rgba() och hsla() tillåter att transparens endast tillämpas på bakgrundsfärgen.

Använda opacitet: Ställ in CSS-egenskapen opacity till ett värde mellan 0 (helt transparent) och 1 (helt ogenomskinlig). Till exempel: opacitet: 0.5;
Använda rgba(): Ange färgen med rgba(röd, grön, blå, alpha). alfa-värdet sträcker sig från 0 till 1, vilket styr transparensen. Exempel: bakgrundsfärg: rgba(255, 0, 0, 0.5); (halvtransparent röd).
Använda hsla(): Liknar rgba(), men använder nyans, mättnad och ljushet. Exempel: bakgrundsfärg: hsla(120, 100%, 50%, 0.5); (halvtransparent grön).

Jämförda transparensalternativ

Egendom	Påverkar	Alfaintervall	Webbläsarsupport
`opacitet`	Hela elementet (innehåll och bakgrund)	0 - 1	Utmärkt
`rgba()`	Endast bakgrundsfärg	0 - 1	Utmärkt
`hsla()`	Endast bakgrundsfärg	0 - 1	Utmärkt

Obs! Transparens interagerar med bakgrunden för det överordnade elementet. Om det överordnade elementet har en solid bakgrund kommer det att synas genom de genomskinliga områdena.