부트 스트랩 점보 트론 배경 이미지 불투명도와 너비 및 높이?

Question

나는 다음과 같은 요구 사항이 있습니다

내가 (단지 대형 기기의 배경 이미지의 투명도를 원하는 비례 적으로 확장 할 수 있습니다

1. 내가 페이지의 폭에 맞게 대형 기기의 배경 이미지를 원하는 높이를)를 특정 값으로 설정합니다. 이것은 현재

   section { 
       position: relative; 
       background-color: transparent !important; 
   } 
   
   section .img { 
       position: absolute; 
       left:0; top:0; 
       background-size: cover; 
       min-height: 768px; 
       width: 100%; 
   
       opacity: 0.45; 
       background-image: url("1.jpg"); 
       z-index: -1; 
   } 
   
   section .container { 
       background-color: transparent; 
   } 
   
   section .container .row { 
       background-color: gray; 
       padding: 1.5em; 
   } 
   

   : 나는 어딘가에 온라인 권장 다음과 같은 트릭을 시도 http://imgur.com/a/qYRGJ

   :

내 배경 이미지가 상당히 큰

<section class="jumbotron"> 
    <div class="img"></div> 

    <div class="container"> 
    <div class="row"> 
     <h1 class="display-3">Test</h1> 
     <p class="lead">Test</p> 
     <p class="lead"> 
     <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> 
     </p> 
    </div> 
    </div> 
</section> 

이 내 CSS입니다 내 코드를 깨뜨린거야. 이 후에 다른 이미지를 만들면 섹션이 배경 이미지에 표시됩니다.

누군가 내 요구 사항을 만족시키는 솔루션을 권장 할 수 있습니까?

Answer 1

이 CSS를 사용하면 문제없이 작동합니다. 전반적으로 Photoshop에서 해당 사진을 편집하고 브라우저에서 불투명도를 설정하는 것이 좋습니다.

<style> 
section { 
    position: relative; 
    background-color: transparent !important; 
} 

section .img { 
    position: absolute; 
    left:0; top:0; 
    background-size: cover; 
    min-height: 768px; 
    width: 100%; 
    opacity: 0.45; 
    background-image: url("http://i.imgur.com/eFMDsVA.jpg"); 
    z-index: -1; 
} 

section .container { 
    background-color: transparent; 
} 

section .container .row { 
    padding: 1.5em; 
} 
.jumbotron { 
    background-color: gray} 
</style>