Непрозрачност - CSS-трикове

В opacityимота в CSS уточнява как прозрачен елемент е.

Основна употреба:

div ( opacity: 0.5; )

Непрозрачността има първоначална стойност по подразбиране 1 (100% непрозрачна). Непрозрачността не се наследява, а защото родителят има непрозрачност, която се отнася за всичко в нея. Не можете да направите дъщерния елемент по-малко прозрачен от родителския, без някои трикове. Стойностите са число от 0 до 1, представляващо непрозрачността на канала („алфа“ канал). Когато елементът има стойност 0, елементът е напълно невидим; стойност 1 е напълно непрозрачна (твърда).

Вижте тази писалка!

Съвместимост с IE

Ако искате непрозрачността да работи във всички версии на IE, подредбата трябва да бъде следната:

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

Ако не използвате тази поръчка, IE8-as-IE7 не прилага непрозрачността, въпреки че IE8 и чист IE7 го правят.

Забележка за подреждането на контексти

Ако opacityе позициониран елемент със и стойност по-малка от 1, z-indexсвойството се прилага, както е описано в CSS2.1, с изключение на това, че autoстойността се третира като 0, тъй като винаги се създава нов контекст на подреждане.

Непрозрачността може да се използва като алтернатива на visibilityсвойството: visibility: hidden;е точно като opacity: 0;.