我正在尝试以这种样式设置图像:一个在顶部,另一个在 this 下方。实际上我做错了什么,在我的结果图像中是一个在另一个之下。这是 jsFiddle。
第二张图片被课堂隐藏overflow:hidden
。slider
问题:
我在哪里犯错?我确信有简单的解决方案,但我浪费了一些时间并且找不到它。
PS 如果有可能我正在寻找仅更改css的解决方案。
将图像的 css 更改为:
img{
display:block;
}
这样就行了。
评论后编辑:
img{
position: absolute;
z-index: -1;
top: 0px;
left:0;
}
这会将您的所有图像钉在左上角。
我想你的img必须
img
{
display:block; /*if you want top to bottom use display:inline;*/
}
我看到你已经标记了一个答案,但我已经输入了这个,所以你去吧:)
您也可以通过删除浮动来稍微简化您的 CSS,如果您只为滑块使用图像(图像旁边没有文本),您甚至可以通过删除整个.photo
div 来简化 HTML。
简化代码:
<div class="slider">
<img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
<img src="http://placehold.it/754x453" alt="Top Image" />
</div>
.slider {
overflow: hidden;
position: absolute;
top: 1px;
left: 371px;
width: 754px;
height: 453px;
}
img{
position: absolute;
z-index: -1;
top: 0px;
left:0px;
}