opacity
Hotel v CSS določa, kako pregledna je element.
Osnovna uporaba:
div ( opacity: 0.5; )
Neprosojnost ima privzeto začetno vrednost 1 (100% neprozorna). Neprosojnost ni podedovana, ampak ker ima nadrejena motnost, ki velja za vse v sebi. Brez nekega trika ne morete narediti podrejenega elementa manj preglednega od nadrejenega. Vrednosti so številke od 0 do 1, ki predstavljajo motnost kanala ("alfa" kanal). Ko ima element vrednost 0, je element popolnoma neviden; vrednost 1 je popolnoma neprozorna (trdna).
Oglejte si to pisalo!
Združljivost z IE
Če želite, da motnost deluje v vseh različicah IE, mora biti vrstni red naslednji:
.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; )
Če tega naročila ne uporabite, IE8-as-IE7 ne uporabi motnosti, čeprav IE8 in čisti IE7 to počneta.
Opomba o zlaganju kontekstov
Če je postavljen element z opacity
vrednostjo manj kot 1, se z-index
lastnost uporabi, kot je opisano v CSS2.1, le da je auto
vrednost obravnavana kot 0, saj je vedno ustvarjen nov kontekst zlaganja.
Motnost lahko uporabimo kot alternativo visibility
lastnosti: visibility: hidden;
je prav tako opacity: 0;
.
Podpora za brskalnik
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
24+ | 5.1+ | 19+ | 12,1+ | 9+ | 2.1+ | 3,2+ |