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

正如你在小提琴中看到的，现在两张图片是一张在另一张下面，所以我决定修改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和height等。

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

1 个答案: