Question

我正在进行一个项目，我必须在容器的背景上放置一个曲线图像。我正在使用三个图像 - 我使用顶部图像，在y轴上可重复的中间图像和底部图像。问题是容器宽度（1028px）是固定的，但高度是可扩展的。

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

但我希望它看起来像this。

这是我的顶部，中间和底部图像：

我正在使用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 .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 */
}

Answer 2

背景不适用于CSS3中的这种样式，它只是CSS 2.1天的黑客攻击。请使用border-image代替http://css-tricks.com/understanding-border-image/

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

2 个答案: