Uigennemsigtighed - CSS-tricks

Den opacityejendom i CSS angiver, hvor gennemsigtig et element er.

Grundlæggende brug:

div ( opacity: 0.5; )

Opacitet har en standardindledningsværdi på 1 (100% uigennemsigtig). Opacitet arves ikke, men fordi forældrene har opacitet, der gælder for alt indeni den. Du kan ikke gøre et underordnet element mindre gennemsigtigt end forælderen uden noget trick. Værdier er et tal fra 0 til 1, der repræsenterer kanalens opacitet ("alfa" -kanalen). Når et element har en værdi på 0, er elementet helt usynligt; en værdi på 1 er fuldstændig uigennemsigtig (fast).

Tjek denne pen!

IE-kompatibilitet

Hvis du vil have opacitet til at arbejde i alle versioner af IE, skal rækkefø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 bruger denne ordre, anvender IE8-som-IE7 ikke opaciteten, selvom IE8 og en ren IE7 gør det.

Bemærk om stablingskontekster

Hvis et element med opacityog en værdi mindre end 1 er placeret, gælder z-indexegenskaben som beskrevet i CSS2.1, bortset fra at autoværdien behandles som 0, da der altid oprettes en ny stablingskontekst.

Opacitet kan bruges som et alternativ til visibilityejendommen: visibility: hidden;er ligesom opacity: 0;.