图像滑块，带边框的图像：在滑块的图像是由后台

Question

覆盖我将解释模式：

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

，但我得到这样的：

肯定的是，这只是架构，但我认为这是它解释我需要的。

我的代码是：

<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，但并没有解决它......

如果有什么不明确，在意见写，谢谢）

在这里你可以看到完整的样品，并尝试dl.dropboxusercontent.com/u/59666091/csshtml.zip

Answer 1

这里是一个解决方案（我试了一下你的全样本和它的工作）：

删除#slidesContainerbackground-image并把图像转换成HTML作为<img>：

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; 
} 

如果由于某种原因，没有w ^兽人，删除代码，并尝试

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