Question

我将通过架构解释：

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

howmustbe

但我明白了：

wrong

当然，它只是架构，但我认为这可以解释我需要什么。

我的代码是：

<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

试试这个

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

如果由于某些原因无效，请删除该代码并尝试

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

Answer 2

这是一个解决方案（我在你的完整样本上尝试了它并且它有效）：

从background-image移除#slidesContainer并将图片放入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;
}

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

2 个答案: