ブートストラップジャンボトロン背景画像不透明度と幅と高さ？

Question

私は、次の要件があります

1. のみ（私はジャンボトロンの背景画像の不透明度をしたい私は、ページの幅に合わせてジャンボトロンの背景画像をしたいと高さは比例
2. スケーリングするに）を特定の値に設定します。これは、現在

   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>