Html 如何在CSS3中以多种背景重复图像？

我正在做一个项目，在这个项目中，我必须在容器的背景上放置一个曲线图像。我用了三张图片，一张上面的图片，一张中间的图片，可以在y轴上重复，还有一张下面的图片。问题是容器宽度（1028px）是固定的，但高度是可扩展的

因此，中间的图像位于容器底部图像的顶部，看起来像

但我希望它看起来像

以下是我的顶部、中部和底部图像：

.map .mpbg {
    min-height: 410px;/* Insert the actual correct value here */
}

我正在使用CSS3多背景图像属性

HTML:

---

如果要包含地图，容器的高度是否必须可展开？很难做出像你的设计要求的形状不规则的可膨胀盒子

我认为最好的办法是给盒子的中间部分设置一个最小高度，该高度等于顶部和底部图像的组合高度：

.map .mpbg {
    min-height: 410px;/* Insert the actual correct value here */
}

这在IE 6中不起作用，但在IE 6中，

height

属性的功能实际上与

minheight

相同，因此在IE 6样式表中，添加以下规则：

.map .mpbg {
    height: 410px;/* Works around lack of support for min-height */
}

---

在CSS3中，背景并不适合这种样式，它只是对CSS 2.1天的一种修改。改用边框图像

那你为什么要用CSS3呢？多个背景在IE8中也不起作用。

.map .mpbg {
    height: 410px;/* Works around lack of support for min-height */
}