多张背景图片合一 div，一张接一张

Question

假设我有两张图片，一张是 1px*700px，第二张是 1px*800px。我想将这些图像作为 background 到一个 div，以便 div 具有 1500px 高度。

CSS3可以吗？

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

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

我的问题：目前我有两个 divs，每个都有一个 background-image，所以放在一起看起来不错。我的问题是我有一个元素需要放在这两个 divs "join" 的位置，当我将该元素放在那里时 - 它会破坏布局。我可以玩 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>

多张背景图片合一 div，一张接一张

Multiple background images in one div, one image after the other

css

background-image

例子