Opacitet - CSS-tricks | CSS Almanack 2025

Den opacityegendom i CSS anger hur transparent ett element är.

Grundläggande användning:

div ( opacity: 0.5; )

Opacitet har ett standardstartvärde 1 (100% ogenomskinligt). Opacitet ärvs inte, utan för att föräldern har opacitet som gäller allt inom den. Du kan inte göra ett underordnat element mindre transparent än föräldern, utan några knep. Värdena är ett tal från 0 till 1 som representerar kanalens opacitet ("alfa" -kanalen). När ett element har värdet 0 är elementet helt osynligt. ett värde på 1 är helt ogenomskinligt (fast).

Kolla in den här pennan!

IE-kompatibilitet

Om du vill att opacitet ska fungera i alla versioner av IE, bör ordningen vara enligt följande:

.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; )

Om du inte använder den här beställningen tillämpar IE8-som-IE7 inte opacitet, även om IE8 och en ren IE7 gör det.

Anmärkning om staplingskontexter

Om ett element med opacityoch ett värde mindre än 1 är placerat, z-indexgäller egenskapen som beskrivs i CSS2.1, förutom att autovärdet behandlas som 0 eftersom ett nytt staplingskontext alltid skapas.

Opacitet kan användas som ett alternativ till visibilityfastigheten: visibility: hidden;är precis som opacity: 0;.