twitter-bootstrap Bootstrap Jumbotron 背景图像不透明度和宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39075369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Jumbotron Background image Opacity and width and height?
提问by Sparrowcide
I have the following requirements:
我有以下要求：
- I want the background image of the jumbotron to fit the width of the page and the height to be scaled proportionally
- I want the opacity of the jumbotron's background image (only) to be set to a specific value.
- 我希望大屏幕的背景图像适合页面的宽度和按比例缩放的高度
- 我希望将大屏幕背景图像（仅）的不透明度设置为特定值。
My background image is quite large: http://imgur.com/a/qYRGJ
我的背景图片很大：http: //imgur.com/a/qYRGJ
I have tried the following trick recommended somewhere online:
我已经尝试了网上某处推荐的以下技巧：
<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>
This is my CSS:
这是我的 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;
}
Currently, this breaks my code. Creating another after this causes the section to be displayed on the background image.
目前，这破坏了我的代码。在此之后创建另一个会导致该部分显示在背景图像上。
Can someone recommend a solution that satisfies my requirements?
有人可以推荐满足我要求的解决方案吗？
回答by coliff
Works fine if you use this CSS. Overall though, it would be better to edit that photo in Photoshop and set the opacity there rather than doing it in the browser.
如果您使用此 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>
