Стоит задача: создать див класс, в качестве фона - изображение, высота его зависит от содержимого. Назову этот блок - Основной. Далее: второй див класс черного цвета с полупрозрачностью для затемнения основного блока. Назову его - Затемнение. Наложить у меня получилось, но вот проблема - затемняется и текст который находится внутри Основного блока. Я пробовал текст вписывать внутрь блока Затемнения, но в данном случае Основной блок не растягивается по высоте содержимого. Целый день ищу, думаю как бы решить эту проблему. Нужно чтобы и текст был в самом верхнем слое и изображение фоновое затемненное. Вот что сейчас:
.main {
background-image: url('images/background.jpg');
z-index: 1;
background-size: 100% 100%;
position: relative;
color: white;
font-size: 14px;
text-align: center;
}
.blackout {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
width: 100%;
height: 100% ;
}
<div class="main">
<div class="blackout"></div>
</div>