CSS

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

18 апреля 2013 247

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

Reg.ru: Регистрация доменов
Reg.ru: Регистрация доменов

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

HTML:

 

Lorem ipsum dolor sit amet.

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

Автор: Иван Данилин

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

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее