我正在尝试制作一个简单的网站,其内容背景由 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;
最佳答案
如果您使用图像,最简单的方法是为容器中的每个图像创建一个 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。但这就是我所做的,而且效果很好:)
安迪
关于html - 以正确的方式填充背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11176413/