Átlátszatlanság - CSS-trükkök

A opacityCSS tulajdonság megadja, hogy egy elem mennyire átlátszó.

Alapvető felhasználás:

div ( opacity: 0.5; )

Az átlátszatlanság alapértelmezett kiindulási értéke 1 (100% átlátszatlan). Az átláthatatlanság nem öröklődik, hanem azért, mert a szülőnek van átláthatatlansága, ami mindenre vonatkozik. Nem tehet egy gyermek elemet kevésbé átlátszóvá, mint a szülő, némi trükk nélkül. Az értékek 0 és 1 közötti számok, amelyek a csatorna átlátszatlanságát jelentik (az „alfa” csatornát). Ha egy elem értéke 0, akkor az elem teljesen láthatatlan; az 1 értéke teljesen átlátszatlan (szilárd).

Nézze meg ezt a tollat!

IE kompatibilitás

Ha azt szeretné, hogy az átlátszatlanság az IE minden verziójában működjön, a sorrendnek a következőnek kell lennie:

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

Ha nem ezt a sorrendet használja, az IE8-as-IE7 nem alkalmazza az átlátszatlanságot, bár az IE8 és a tiszta IE7 igen.

Megjegyzés a halmozási összefüggésekről

Ha opacity1-nél kisebb és kisebb értékű elemet z-indexhelyeznek el, akkor a tulajdonság a CSS2.1-ben leírtak szerint érvényesül, azzal a különbséggel, hogy az autoérték 0-ként kezelendő, mivel mindig új veremkörnyezet jön létre.

Az opacitás az visibilityingatlan alternatívájaként használható : visibility: hidden;olyan, mint opacity: 0;.