Непрозрачность - 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, поскольку всегда создается новый контекст стекирования.

Opacity можно использовать как альтернативу visibilityсвойству: visibility: hidden;is just like opacity: 0;.