用正确的方式填充背景

我正在尝试使内容背景由3个图像组合而成的简单网站：顶部栏，内容背景和底部栏。用正确的方式填充背景

的问题是内容的背景下，顶部和底部栏显示，其中应该是透明度： enter image description here

后，加入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;

来源

2012-06-24 Adrian Adamczyk

使用CSS3 - 边界半径：http://www.css3.info/preview/rounded-border/ –

我知道这件事情，但是我怎样才能让两个不同的颜色笔画像我的图像一样？ –

边框半径也会裁剪背景，因此将属性应用到要四舍五入的部分。如果您只是使用纯色块，只需使用背景色并将您的用户保存一些千字节。 –

如果你使用的图像是你在容器中创建的每个图像的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;如果您无法正确排列它们，可能会导致部分分区。但是，这是我做什么，和它完美的作品:)

安迪

来源

2012-06-24 10:12:54

用正确的方式填充背景

回答

相关问题