CSS 전체 화면 배경 rgba 오버레이

Question

본문보다는 html의 CSS에 적용된 고정 된 전체 화면 배경 이미지가 있습니다. 나는 내가 너무 쉼표없이 시도

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

을 시도 할 때 작동하지 않았다하지만 도움이되지 않았기 때문에 신체의 CSS에서 IS 감소 불투명도와 검은 색 오버레이를 가지고있다. 나는 height: 100%을 색 오버레이로 body으로 설정했고 화면 높이가 100 %이지만 더 이상 사용하지 않기 때문에 아래로 스크롤 할 때까지 작동합니다.

내가 작업하고있는 페이지는 화면을지나 아래로 늘어나고 오버레이가 따르지 않을 때 문제를 일으키는 1 개 또는 2 개의 세로/높이 이미지가있는 갤러리입니다.

쉽게 해결할 수없는 경우 몇 가지 조건부 자바 스크립트 코드 또는 그 몇 가지 이미지를 볼 때 신체의 높이를 확장 할 수 있습니까?

Answer 1

가장 좋은 방법은 오버레이를 만들기 위해 페이지 상단에있는 div를 만드는 것입니다. 아래 스 니펫에서 본 예를 참조하십시오.

는 기본적으로 overlay 사업부는 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>