Непрозорість - 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-як-IE7 не застосовує непрозорість, хоча IE8 і чистий IE7 це роблять.

Примітка щодо контексту укладання

Якщо opacityпозиціонується елемент зі значенням менше 1, z-indexвластивість застосовується, як описано в CSS2.1, за винятком того, що autoзначення обробляється як 0, оскільки завжди створюється новий контекст стекування.

Непрозорість можна використовувати як альтернативу visibilityвластивості: visibility: hidden;це точно так само opacity: 0;.