以正确的方式填充背景

Question

我正在尝试制作简单的网站，内容背景由3张图片组成：顶栏，内容背景和底栏。

问题是内容背景显示在顶部和底部栏下面，其中应该是透明度：

添加BG CSS之前和之后：

background-image: url('content-top.png'), url('content-bottom.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;

background-image: url('content-top.png'), url('content-bottom.png'), url('content-body.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: left top, left bottom, left center;

我该如何解决这个问题？

编辑： 我用CSS3创建了相同的效果，解决了这个问题：

background-color: #d9daca;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px #8a8977 solid;

Answer 1

如果您正在使用图像，最简单的方法是为容器中的每个图像创建一个div，并通过css属性控制背景，或者只是将图像放入div中。你遇到的问题是顶部图像与背景图片重叠，因为它的一个div。拆分它，它会对问题进行排序，例如：

<div id="wrapper">
    <div id="top"></div>
    <div id="middle">
        <!-- Content in here -->
    </div>
    <div id="bottom"></div>
</div>

这样所有的div都保存在一个包装器中。你可能需要申请float：left！important;对于某些div，如果你在让他们正确排队时遇到麻烦。但这就是我所做的，它完美无缺：）

安迪