用正確的方式填充背景

我正在嘗試使內容背景由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

用正確的方式填充背景

回答

相關問題