twitter-bootstrap 调整引导英雄单元上的背景图像不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16722271/
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
Adjust background image opacity on bootstrap hero unit
提问by vt97john
How can I edit my css to adjust the opacity on the background image in the hero unit without affecting the opacity of the text etc in the hero unit? Here is the draft site (yes i'll be paying for proper version of the photo): site
如何编辑我的 css 以调整英雄单元中背景图像的不透明度，而不影响英雄单元中文本等的不透明度？这是草稿站点（是的，我将为正确版本的照片付费）： 站点
回答by Robert McKee
The easy answer is to take your .jpg, and create a .png with it that has your opacity already applied.
简单的答案是获取您的 .jpg，并使用它创建一个 .png，其中已经应用了您的不透明度。
回答by Zim
One way would be to move your hero text outside of the hero unit and use position:relativeto place it where you want...
一种方法是将您的英雄文本移到英雄单位之外，然后将position:relative其放置在您想要的位置...
CSS
CSS
.hero-unit {
background-image:url('..');
height:300px;
opacity: .5;
}
h1 {
position: relative;
top: -350px;
left: 40px;
color:#fff;
}
HTML
HTML
<div class="container">
<div class="hero-unit">
</div>
<h1>Hello Hero Text</h1>
</div>
This example assumes your hero text it contained in an H1, but it could be in any container outside of the hero.
此示例假定您的英雄文本包含在 H1 中，但它可以位于英雄之外的任何容器中。
