Motnost - CSS-triki

Anonim

opacityHotel 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 opacityvrednostjo manj kot 1, se z-indexlastnost uporabi, kot je opisano v CSS2.1, le da je autovrednost obravnavana kot 0, saj je vedno ustvarjen nov kontekst zlaganja.

Motnost lahko uporabimo kot alternativo visibilitylastnosti: 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+