글꼴이 아닌 배경에 대한 불투명도

Question

안녕하세요 이전 질문을 검색하고 여러 가지 방법을 시도했지만 글꼴의 불투명도를 영향을주지 않고 배경 이미지의 불투명도를 설정하는 데 여전히 문제가 있습니다.

이

내 HTML입니다 :

<main> 
    <div class="background"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
      <div class="center"> 
       <h1>My name</h1> 
       <h3>this is my website</h3> 
       <hr> 
       <button id = "mainButton" type="button" class="btn btn-default btn-lg">Get Started!</button> 
      </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    </main> 

이것은 CSS입니다 : 내가 RGBA (0,0,0,0.5)를 사용하려고 *

.background{ 
    background-image: url("xxx.jpg"); 
    width: 100%; 
    height:100%; 
    position:fixed; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    opacity:0.5; 
} 

;

* h1에 대해 또 다른 CSS 규칙을 설정하려고했으나 텍스트와 함께 div하지만 여전히 동일하게 설정하려고했습니다.

아무도 도와 줄 수 있습니까? mainposition: relative;

가 배경 DIV position: absolute;

나머지를 해결하려면 줄

<main> 
    <div class="background"> 
    </div> 

    <div class="container"> 
    </div> 
</main> 

가 보내기

Answer 1

이 같은 마크 업합니다. 너 끝났어. 배경 크기에 대한

당신은 cover 같은 이미지의 배경 background-size에 의해 크기와 사용 가치, contain, 100%, 100% 100% 등

모든 페이지를 포함하려면

, 사용 가치를 수정할 수 있습니다 100vh으로, 뷰포트 높이의 100 %를 의미합니다.