html - CSS - 在背景图像上填充

Question

当我使用 .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 代码来完成这项工作。

Example

Answer 1

你可以试试这个:

1. 将 top + middle images 合并为一个图像，并使中间部分非常长。
2. 将其作为 div 的背景图片。
3. 在上面的 div 中放置第二个 div，底部图像作为背景图像与该 div 的底部对齐。使底部图像不透明，但用黄色 bg 颜色 将其填充在云周围。