1

我正在尝试制作简单的网站，其内容背景由 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;
4

1 回答 1

2

如果您使用图像，最简单的方法是为容器中的每个图像创建一个 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。但这就是我所做的，而且效果很好:)

安迪

于 2012-06-24T10:12:54.007 回答