图像滑块，以边框为图像：滑块中的图像被背景覆盖

Question

我会按模式解释：

灰色和白色是我的第一个div的背景，白色的意思是，这部分是透明的。 图像边框（滑块边框）为黄色。我在滑块中的图像是红色的。我需要它这样工作：

但我明白了：

当然，这只是模式，但我认为这就是我需要的解释。

我的代码是：

<div class='slider'>
      <div class='top_area'>
        <div class='top_area_shadow'>
          <div class='contact'>
          </div>
        </div>
      </div>
      <div id='slideshow'>
        <div id='slidesContainer'>
          <!-- <span class="control" id="leftControl"></span> -->
          <div class="slide">
            <img src="../images/daf.png">
          </div>
          <div class="slide">
            <img src="../images/daf.png">
          </div>
          <div class="slide">
            3
          </div>
          <!-- <span class="control" id="rightControl"></span>          -->        
        </div>        
      </div>
    </div>

和css：

.top_area{
  height: 80px;
}

.top_area_shadow{
  height: 80px;
  background: url(../images/header_shadow.png);
  background-position: center;
}

.contact{
  position: absolute;
  background: none;
  height: 32px;
  margin-left: -510px;
  margin-top: 32px;
  width: 1020px;
  left: 50%;
  text-align: center;
  display: inline-block;
}

.left_float{
  float: left;
  /*text-align: left;*/
}

.right_float{
  float: right;
  /*text-align: right;*/
}

.slider{
  background: url(../images/slider_bg.png);
  background-position: bottom;
  width:100%;
  height:330px;
}

#slidesContainer {
  width:1020px;
  height:244px;
  overflow:auto;
  left: 50%;
  margin: 0px 0 0 -510px;
  position:absolute;
  background-color: #fff;
  background: url(../images/border.png) no-repeat 0 0;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:1020px; 
  height:244px;
  z-index: -1;
  position: absolute;
}

.slide img{
  z-index: 1;
  position:absolute;
}

.control {
  display:block;
  width:41px;
  height:40px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:4px;
  background:transparent url(../images/arrow_left.png) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:4px;
  background:transparent url(../images/arrow_right.png) no-repeat 0 0;
}

你可以在这里找到图片：

https://dl.dropboxusercontent.com/u/59666091/img.zip

所以：我需要做滑块，其中图像位于透明边框图像下（架构上的黄色），如果我没有任何灰色背景 - 它可以工作，但使用 bg - 没有。我做错了什么？

我也尝试使用 z-index，但没有解决它...

如果有不清楚的地方，写在cmets，谢谢）

在这里您可以查看完整示例并尝试一下 dl.dropboxusercontent.com/u/59666091/csshtml.zip

Answer 1

这是一个解决方案（我在您的完整示例上进行了尝试，并且成功了）：

从#slidesContainer 中删除background-image 并将图像作为<img> 放入html：

HTML：

 <div id="slideshow">
    <div id="slidesContainer">
       <img src="images/border.png"> <!-- removed from css -->
       <!-- <span class="control" id="leftControl"></span> -->
       <div class="slide">
         <img src="images/daf.png">
       </div>
       <div class="slide">
         <img src="images/daf.png">
       </div>
       <div class="slide">
         <img src="images/daf.png">
       </div>
       <!-- <span class="control" id="rightControl"></span> -->        
    </div>       
 </div>

CSS：

 .slider{
  background: url(images/slider_bg.png);
  background-position: bottom;
  width:100%;
  height:330px;
}

#slidesContainer {
  width:1020px;
  height:244px;
  overflow:hidden;
  left: 50%;
  margin: 0px 0 0 -510px;
  position:absolute;
  background-color: #fff;
}

#slidesContainer > img{
  left: 50%;
  margin: 0px 0 0 -510px;
  position:absolute;
  z-index: 1;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:1020px; 
  height:244px;
  position: absolute;
}

Answer 2

试试这个

#slideshow .slide img {
  z-index: 9999;
}

如果由于某种原因不起作用，请删除该代码并尝试

#slideshow #slidesContainer .slide img {
   z-index: 9999;
}