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

18 апреля 2013

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

Топ 10 продающих лендингов для Вордпресс

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

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

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 р.
Подробнее