Автор Тема: Наследование opacity (прозрачности) вложенными элементами  (Прочитано 6767 раз)

Марахтанов Алексей

  • Администратор
  • Постоялец
  • *****
  • Сообщений: 205
    • marahtanov.ru
Интересно, что 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.
« Последнее редактирование: 11 Август 2012, 03:00:47 от Марахтанов Алексей »