由 3 个图像组成的容器的 CSS

Question

正如标题所说，我正在尝试制作一个容器，其顶部带有不重复的图像，中间的图像将垂直重复，底部的图像将与顶部相同一个。所以，我的问题是我无法正确消除它们之间的填充，我已经尝试过，但是如果我在那个容器中添加一些内容，它就会搞砸。我需要的是指导我要做的事情正确删除这些填充并无间隙地显示内容。

为了更清楚，我做了一个简单的“演示”。

Answer 1

这样做。每个 Box 的高度都是可变的!

<div id"box">
  <div class="top_image"><!-- --></div>
  <div class="mid-image">
    <p>Hello World!</p>
  </div>
  <div class="bottom_image"><!-- --></div>
</div>

你的 CSS:

#box div.top-image {
  background: url(img/top-image.png) 0 0 no-repeat;
  height: //Your height;
}

#box div.mid-image {
 background: url(img/mid-image.png) 0 0 repeat-y;
}

#box div.bottom-image {
  background: url(img/bottom-image.png) 0 0 no-repeat;
  height: //Your height;
}