html - 如何在 CSS 中叠加两张图片？

Question

我想把两张图片放在网页的同一个地方——相互叠加(稍后我会添加一些webkit动画让它们向两个不同的方向移动，但起点应该是相同的)。我有以下 css 布局(这里是 jsfiddle )。此处的 CSS 如下所示:

.intro{
    background-color: #b0e0e6;
    width: 100%;
    margin: 0 auto;
    font-size: 1.5em;
    padding: 5px;
}
.intro:before,.intro:after {
    content: " ";
    display: table;
}
.intro:after {
    clear: both;
}
.image{
    width: 50%;
    background-color: #aaaae6;
    float: left;
}
img{
    margin: 0 auto;
    display: block;

}
.text{
    width: 50%;
    background-color: #cccccc;
    float: left;
}

正如你在 fiddle 中看到的，现在两张图片一张在另一张下面，所以我决定修改 css 并添加:

img{
    margin: 0 auto;
    display: block;
    position:absolute;
    left: 10%;
    top: 25%;      
}

但这会导致根本不可见...我怎样才能保留该 div 的大小并直接将两个图像直接放入其中？

Answer 1

作为考虑的起点:在CSS3中，单个元素可以有multiple, stacked background images .示例:

.my-container {
  background:
    url(grid.png),
    url(building.jpg)
}

这是一个 codepen .

在CSS2及以下，你可以使用z-index, absolute, width, and height等.