Главная / Блог / Фронтенд

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

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

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

И всё.