为猫头鹰旋转木马图像添加背景颜色

Question

我正在使用jQuery Owl Carousel，我已经创建了一个图像滑块，我想在滑块图像上添加背景色。

2019年注意: http://owlgraphic.com现在重定向到恶意网站。

标记如下:

 <!-- 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 -->

我已经添加了这个CSS:

.header-02-sub {
background-color:red;
z-index:9999999;
witdth:100%;
height:100%;
}

我也试过将此代码添加到#owl-slider父或.item，这些作品都没有。

这里有一个jsbin

关于如何在幻灯片图像上添加背景色有什么建议吗?

Answer 1

添加一个绝对定位的div(我们将其命名为.overlay)到.item元素，然后用

标记这个新div

.overlay{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 700px;
  width: 1600px;
  background-color: red;
  opacity: 0.5;
}

更新:

如果你的页面是响应，添加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;
}

新JSBin