Форум

Практическая деятельность => DHTML: HTML + CSS + JavaScript => Тема начата: Марахтанов Алексей от 11 Август 2012, 02:59:16

Название: Наследование opacity (прозрачности) вложенными элементами
Отправлено: Марахтанов Алексей от 11 Август 2012, 02:59:16
Интересно, что CSS-свойство opacity (прозрачность) полностью и навсегда наследуется всеми вложенными элементами.
Прозрачность вложенных элементов не может быть меньше (менее прозрачный), чем у родителя.

То есть если вы, например, создадите div и зададите ему свойство opacity:0.5 (полупрозрачный), то любой вложенный в этот div элемент будет также полупрозрачным.

Конечно, это не всегда удобно, поскольку бывают случаи, что в большом полупрозрачном элементе надо создать меньший непрозрачный (менее прозрачный) блок. Для решения этой проблемы необходимо использовать прозрачность фона верхнего элемента, которая задается 4-й координатой rgba(255,255,255,0.6); * первые три цифры - RGB-код цвета фона.

div {
background: rgba(255,255,255,0.5) url(background.png) no-repeat;
}

Естественно, данный способ сработает только в тех браузерах, которые поддерживают данные возможности CSS3.