Уже не в первый раз сталкиваюсь сегодня с такой проблемой: дочерние блоки наследуют прозрачность от своего родителя и отменить это действие средствами CSS невозможно. Показываю, как от этого избавиться.
Переформулировать задачу и отказаться от прозрачности было невозможно. Однако мне попалось одно довольное элегантное решение, смысл которого состоит в том, что мы создаем блоки одного уровня иерархии и красиво смещаем теперь уже не дочерний блок с прозрачностью на свое место.
Пример рабочего кода:
HTML:
<div class="container"> <div class="back"></div> <div class="content">Lorem ipsum dolor sit amet.</div> </div>
CSS:
.container { width: 500px; margin: 15px; padding: 30px; position: relative; } .back { position: absolute; top: 0; bottom: 0; left: 0; opacity: 0.20; filter: alpha(opacity=20); width: 100%; background: red; } .content { position: relative; }
И всё.
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
Подробнее