html - 如何在具有多个背景的 CSS3 中重复图像？

Question

我正在做一个元素，我必须在容器的背景上放置一个曲线图像。我为此使用了三张图片——我使用了一张顶部图像、一张在 y 轴上可重复的中间图像和一张底部图像。问题是容器宽度 (1028px) 是固定的，但高度是可扩展的。

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

但我希望它看起来像this .

这是我的顶部、中间和底部图像:

• > top-image
• > mid-image
• > bottom-image

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

HTML:

<div class="map clearfix">
      <div class="mpbg"></div>
</div>

CSS:

.map {
  float: left;
  background:url("../../img/mpbg-bt-1028-205.png") no-repeat left bottom, url("../../img/mpbg-top-1028-205.png") no-repeat left top;
  margin: -30px 0 20px 0;
  z-index:999;
  width: 1028px;
}

.map .mpbg {
  float: left;
  margin:10px 0 20px 0;
  background: url('../../img/googlemap-996-380.jpg') no-repeat 17px 0, url("../../img/mpbg-mid-1028.png") repeat-y;
  width: 1028px;
  height: 380px;
}

Answer 1

如果要包含 map ，容器的高度是否必须是可扩展的？很难按照您的设计要求制作具有不规则形状的可扩展盒子。

我认为最好的办法是让盒子的中间部分的最小高度等于顶部和底部图像的组合高度:

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

这在 IE 6 中不起作用，但在 IE 6 中，height 属性实际上与 min-height 功能相同，因此在您的 IE 6 样式表中，添加此规则:

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