Opasitet - CSS-triks | CSS-almanakk 2025

Den opacityeiendom i CSS angir hvor gjennomsiktig et element er.

Grunnleggende bruk:

div ( opacity: 0.5; )

Opacity har en standard startverdi på 1 (100% ugjennomsiktig). Opasitet arves ikke, men fordi foreldrene har opasitet som gjelder for alt innenfor den. Du kan ikke gjøre et underordnet element mindre gjennomsiktig enn foreldrene, uten noen lureri. Verdiene er et tall fra 0 til 1 som representerer kanalens opasitet ("alfa" -kanalen). Når et element har verdien 0, er elementet helt usynlig. en verdi på 1 er helt ugjennomsiktig (solid).

Sjekk ut denne pennen!

IE-kompatibilitet

Hvis du vil at opasitet skal fungere i alle versjoner av IE, bør rekkefølgen være som følger:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Hvis du ikke bruker denne bestillingen, bruker IE8-as-IE7 ikke opasiteten, selv om IE8 og en ren IE7 gjør det.

Merknad om stablingskontekster

Hvis et element med opacityog en verdi mindre enn 1 er plassert, z-indexgjelder egenskapen som beskrevet i CSS2.1, bortsett fra at autoverdien behandles som 0 siden en ny stablingskontekst alltid opprettes.

Opasitet kan brukes som et alternativ til visibilityeiendommen: visibility: hidden;er akkurat som opacity: 0;.