twitter-bootstrap 在猫头鹰轮播图像上添加背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25185653/
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
add background color over owl carousel image
提问by agis
I'm using jQuery Owl Carouseland I've created an image slider in which I want to add a background color over the slider image.
我正在使用jQuery Owl Carousel并且我创建了一个图像滑块，我想在其中在滑块图像上添加背景颜色。
Note from 2019: http://owlgraphic.comredirects to malicious site now.
2019 年的注意事项：http: //owlgraphic.com现在重定向到恶意站点。
Here's the markup:
这是标记：
<!-- HEADER-02 CONTENT -->
<div class="header-02-sub">
<!-- SLIDER STARTS HERE -->
<div id="owl-slider" class="owl-carousel owl-theme">
<div class="item">
<img src="http://placehold.it/1600x700" alt="The Last of us">
<div class="caption">
<h1>SOME TITLE HERE</h1>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1600x700" alt="The Last of us">
<div class="caption">
<h1>SOME TITLE HERE</h1>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1600x700" alt="The Last of us">
<div class="caption">
<h1>SOME TITLE HERE</h1>
</div>
</div>
</div>
<!-- SLIDER ENDS HERE -->
</div>
<!-- END HEADER-02 CONTENT -->
I've tied adding this CSS :
我已经绑定了添加这个 CSS ：
.header-02-sub {
background-color:red;
z-index:9999999;
witdth:100%;
height:100%;
}
I've tried also adding this code to the #owl-sliderparent or .itemand none of these works.
我也试过将此代码添加到#owl-slider父级或.item这些都不起作用。
Here's a jsbin
这是一个jsbin
Any suggestions on how can I add a background color over the slide image ?
关于如何在幻灯片图像上添加背景颜色的任何建议？
回答by Lloyd Banks
Add an absolutely positioned DIV (we'll call it .overlay) into the .itemelement and then mark-up this new DIV with
添加一个绝对定位的 DIV（我们称之为.overlay）到.item元素中，然后用
.overlay{
position: absolute;
top: 0px;
left: 0px;
height: 700px;
width: 1600px;
background-color: red;
opacity: 0.5;
}
Update:
更新：
If your page is responsive, add position: relativeto .itemand then change .overlayheight and width to 100%
如果你的页面响应，加入position: relative到.item再改变.overlay高度和宽度100％
.item{
position: relative;
}
.overlay{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: red;
opacity: 0.5;
}
