图像滑块,边框为图像:滑块中的图像由背景覆盖 [英] 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屋!