Necaurredzamība - CSS-triki

Anonim

opacityĪpašums CSS norāda, cik pārredzama elements ir.

Pamata lietošana:

div ( opacity: 0.5; )

Dūmainībai noklusējuma sākotnējā vērtība ir 1 (100% necaurspīdīga). Dūmainība nav iedzimta, bet gan tāpēc, ka vecākiem ir necaurredzamība, kas attiecas uz visu tajā esošo. Jūs nevarat padarīt bērna elementu mazāk caurspīdīgu nekā vecāks, bez dažām viltībām. Vērtības ir skaitlis no 0 līdz 1, kas apzīmē kanāla necaurredzamību (“alfa” kanālu). Kad elementa vērtība ir 0, elements ir pilnīgi neredzams; vērtība 1 ir pilnīgi necaurspīdīga (cieta).

Pārbaudiet šo pildspalvu!

IE saderība

Ja vēlaties, lai necaurredzamība darbotos visās IE versijās, secībai jābūt šādai:

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

Ja jūs neizmantojat šo pasūtījumu, IE8-as-IE7 nepiemēro necaurredzamību, lai gan IE8 un tīrs IE7 to dara.

Piezīme par sakraušanas kontekstiem

Ja tiek novietots elements ar opacityvērtību, kas mazāka par 1, z-indexīpašums tiek lietots, kā aprakstīts CSS2.1, izņemot to, ka autovērtība tiek uzskatīta par 0, jo vienmēr tiek izveidots jauns sakraušanas konteksts.

Necaurredzamību var izmantot kā alternatīvu visibilityīpašumam: visibility: hidden;ir tāpat kā opacity: 0;.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
24+ 5.1+ 19+ 12.1+ 9+ 2.1+ 3.2+