0

当我使用 .gif 或 jpg 图像时，以下代码通常对我很有效。

#contentBox1{ position:relative; width:980px; background:url(../images/bg-middle.png) repeat-y; min-height:80px;   }
#contentBox2{ position:relative; width:980px; background:url(../images/bg-top.png) no-repeat top; }
#contentBox3{ position:relative; width:980px; background:url(../images/bg-bottom.png) no-repeat bottom; min-height:500px; }

<div id="contentBox1"> <div id="contentBox2"> <div id="contentBox3">  Content Text Goes Here. </div> </div> </div>

但正如你所见，我使用 .png 是因为一切都需要透明度才能看到背景。所以“middle.png”背景出现在页眉和页脚后面。我需要这个 div 顶部和底部的所有空间，但似乎无法找出最佳的 CSS 代码来完成这项工作。

例子

4

3 回答 3

1

你可以试试这个：

  1. 将top + middle 图像组合成一张图像，并使中间部分非常长。
  2. 将其放置为background imagediv 的。
  3. 在上面的 div 中放置第二个div，底部图像与该 div 的底部对齐作为背景图像。使底部图像不透明，但用黄色填充云周围bg colour。
于 2012-07-23T09:52:03.373 回答
0

试试这个，重新排序你的div如下

<body>
<div id="contentBox2"></div>
<div id="contentBox1">
      <div id="content">Content Goes Here</div>
</div>
<div id="contentBox3"></div>
</body>

然后按如下方式更改 CSS，这是一个更合乎逻辑的布局，应该更容易理解，内部的#content div 将为文本添加填充，使其出现在图像中。顶部和底部 div 的最小高度设置为图像的高度，因此您不会有任何背景颜色渗入。您可以将#ContentBox1 的最小高度更改为您想要的大小。

#contentBox2 {
    background: url("images/bg-top.png") no-repeat scroll center top transparent;
    margin: 0 auto;
    min-height: 304px;
    position: relative;
    width: 980px;
}

#contentBox1 {
    background: url("images/bg-middle.png") repeat-y scroll 0 0 transparent;
    margin: 0 auto;
    min-height: 560px;
    position: relative;
    width: 980px;
}

#contentBox3 {
    background: url("images/bg-bottom.png") no-repeat scroll center bottom transparent;
    margin: 0 auto;
    min-height: 240px;
    position: relative;
    width: 980px;
}

#content {
    padding: 40px;
}

希望这可以帮助

于 2012-07-23T10:01:23.233 回答
0

我使用了一点 Billys 的建议，但稍作改动。限制是它有一个最大高度。

#contentBox1{ position:relative; width:980px; background:url(images/bg-top.png) repeat-y top left; min-height:300px;  margin:0 auto;   }
#contentBox3{ position:absolute; bottom:-218px; width:980px; height:218px;  background:url(images/bg-bottom.png) no-repeat left bottom;  }  /* bg image is 240px; */
#content{ width:900px; position:relative; margin:0 auto; padding-top:85px;}

<div id="contentBox1">   <div id="content">Content text goes here. </div> <div id="contentBox3">  </div> </div>

你可以看到http://webdesignmb.com/test/

于 2012-07-23T10:45:20.253 回答