Neskaidrumas - CSS-gudrybės | CSS almanachas 2025

opacityCSS nuosavybė nurodo, kaip skaidrus elementas yra.

Pagrindinis naudojimas:

div ( opacity: 0.5; )

Numatomoji pradinė vertė yra 1 (100% nepermatoma). Neskaidrumas nėra paveldimas, bet todėl, kad tėvas turi neskaidrumą, kuris taikomas viskam, kas jame yra. Negalite padaryti vaiko elemento mažiau skaidraus nei tėvas, be tam tikrų gudrybių. Vertės yra skaičius nuo 0 iki 1, nurodantis kanalo nepermatomumą („alfa“ kanalas). Kai elemento vertė yra 0, elementas yra visiškai nematomas; 1 reikšmė yra visiškai nepermatoma (vientisa).

Patikrinkite šį rašiklį!

IE suderinamumas

Jei norite, kad neskaidrumas veiktų visose IE versijose, tvarka turėtų būti tokia:

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

Jei nenaudosite šios tvarkos, IE8-as-IE7 netaiko neskaidrumo, nors IE8 ir grynas IE7.

Pastaba apie dėliojimo kontekstus

Jei yra elementas, opacitykurio vertė yra mažesnė nei 1, z-indexypatybė taikoma taip, kaip aprašyta CSS2.1, išskyrus tai, kad autovertė traktuojama kaip 0, nes visada sukuriamas naujas kaupimo kontekstas.

Neskaidrumas gali būti naudojamas kaip alternatyva visibilitynuosavybei: visibility: hidden;yra kaip ir opacity: 0;.