圖像滑塊，帶邊框的圖像：在滑塊的圖像是由後臺

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