css - 一个div中的多个背景图像，一张接一张

Question

假设我有 2 张图片，一张是 1px*700px，第二张是 1px*800px。我想将这些图像作为 background 放到一个 div 中，这样 div 就有 1500px 高度。

用 CSS3 可以吗？

div{
    background: url(first_image.jpg) repeat-x, url(second_image.jpg) repeat-x;
    /* ... */
}

我可以在 Photoshop 中“加入”这些图像，但我想知道是否有 CSS3 解决方案。

我的问题:目前我有两个 div 并且每个都有一个 background-image 所以放在一起看起来不错。我的问题是我有一个元素需要放在这两个 divs“连接”的位置，当我将该元素放在那里时 - 它会破坏布局。我可以使用 position: absolute，但我宁愿避免这种情况。

Answer 1

由于 div 的高度等于两个背景图像的高度，您可以使用 bottom 将第二个背景图像移动到第一个背景图像的下方。

例子

div {
  background: url(http://www.placehold.it/5X100) repeat-x, 
  url(http://www.placehold.it/5X100/FF0000) bottom repeat-x;
  height: 200px;
}

<div></div>