图像滑块，边框为图像：滑块中的图像由背景覆盖 [英] Image slider, with border as image: image in slider is covered by background

问题描述

我将用模式解释：

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

grey and white is my background of first div, white is meaned, that this part is transparent. image border (slider border) is yellow. My image in slider is red.. I need that it works so:

但我得到：

当然，它只是模式，但我认为这是它解释我需要什么。

sure, it's only schema, but i think that's it explain what i need.

我的代码是：

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

您可以在这里找到图片：

image's you can get here:

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

所以：我需要做滑块，其中图像是在透明边框图像（黄色的模式），如果我没有任何灰色背景 - 它的工作，但与bg - 't。我做错了什么？

So: i need to do slider, where image is under transparent border image (yellow on schema), and if i didn't have any grey background - it works, but with bg - didn't. What i do wrong?

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

also i try with z-index, but didn't solve it...

清除，写入评论，谢谢）

If something not clear, write in comments, thank you )

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

here you can see full sample and try a little bit dl.dropboxusercontent.com/u/59666091/csshtml.zip

推荐答案

这里是一个解决方案（我试过你的完整的样本，它工作）：

here is a solution (I tried it on your full sample and it worked):

从 #slidesContainer 中删除​​ background-image < 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;
}

这篇关于图像滑块，边框为图像：滑块中的图像由背景覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！