CSS fullscreen background rgba overlay

Question

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

background:rgba(0, 0, 0, 0.6), url(image.jpg); 

Я пытался без запятой тоже, но это не помогло. Я установил height: 100% в body с наложением цвета, и он работает, пока я не прокручу вниз, потому что он использует 100% высоты экрана, но не дальше.

Страница, на которой я работаю, представляет собой галерею с 1 или 2 изображениями/изображениями, которые вызывают проблему, когда они растягиваются по экрану, а наложение не следует.

Если нет легкого исправления, могу ли я добавить условный код javascript или что-то, что увеличило бы высоту тела при просмотре только этих изображений?

Answer 1

Лучше всего было бы создать div, который находится поверх страницы, чтобы создать наложение. См. Мой пример в нижеприведенном фрагменте.

В основном overlay div - fixed, поэтому он остается в нем top: 0, даже если вы прокручиваете. Поскольку высота и ширина 100%, он постоянно заполняет экран. Теперь вы можете снова установить свой фон на теле или где захотите.

.overlay { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.content { 
 
    height: 1000px; 
 
    background: green; 
 
}

<div class="overlay"></div> 
 
<div class="content">Text</div> 
 
<div class="content">Text</div>