Läbipaistmatus - CSS-trikid | CSS-i almanahh 2025

opacityVara CSS määrab, kuidas läbipaistev element on.

Põhikasutus:

div ( opacity: 0.5; )

Läbipaistmatuse algväärtus on vaikimisi 1 (100% läbipaistmatu). Läbipaistmatust ei pärita, vaid seetõttu, et vanemal on läbipaistmatust, mis kehtib kõige selle sees. Lapse elementi ei saa vanemast vähem läbipaistvaks muuta, ilma et oleks mingeid trikke. Väärtused on arv 0–1, mis tähistab kanali läbipaistmatust („alfa” kanal). Kui elemendi väärtus on 0, on element täiesti nähtamatu; väärtus 1 on täiesti läbipaistmatu (kindel).

Vaadake seda pliiatsit!

IE ühilduvus

Kui soovite läbipaistmatust töötada kõigis IE versioonides, peaks järjekord olema järgmine:

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

Kui te ei kasuta seda järjekorda, ei rakenda IE8-as-IE7 läbipaistmatust, ehkki IE8 ja puhas IE7.

Märkus virnastamise kontekstide kohta

Kui opacityasetatakse element, mille väärtus on väiksem kui 1, rakendatakse z-indexatribuuti CSS2.1-s kirjeldatud viisil, välja arvatud see, et autoväärtust käsitletakse kui 0, kuna alati luuakse uus virnastamise kontekst.

visibilityOmaduse alternatiivina saab kasutada läbipaistmatust : visibility: hidden;on täpselt nagu opacity: 0;.