html - 以正确的方式填充背景

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。但这就是我所做的，而且效果很好:)

安迪