Bootstrap Jumbotron背景图像不透明度和宽度和高度？

Question

我有以下要求：

1. 我想要的超大屏幕的背景图像以适合页面的宽度和高度按比例缩放
2. 我想要的超大屏幕的背景图像的不透明度（仅）被设置为特定值。

我的背景图像是相当大的：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：

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; 
} 

目前，这打破了我的代码。在此之后创建另一个会导致该部分显示在背景图像上。

有人可以推荐满足我的要求的解决方案吗？

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>