Отмена передачи наследственной прозрачности дочерним элементам в CSS

18 апреля 2013

Уже не в первый раз сталкиваюсь сегодня с такой проблемой: дочерние блоки наследуют прозрачность от своего родителя и отменить это действие средствами CSS невозможно. Показываю, как от этого избавиться.

20 новейших лендингов для Вордпресс 2018 года

Переформулировать задачу и отказаться от прозрачности было невозможно. Однако мне попалось одно довольное элегантное решение, смысл которого состоит в том, что мы создаем блоки одного уровня иерархии и красиво смещаем теперь уже не дочерний блок с прозрачностью на свое место.

Пример рабочего кода:

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;
}

И всё.

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

Популярное в этом месяце
Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Добавить комментарий

Услуги фрилансеров по фиксированной цене — 500 р.
Подробнее