我怎樣才能讓我的形象邊界出現的背景色

Question

http://jsfiddle.net/efDuN/

我試圖創建一個頂部圖片邊框頁腳和背景顏色之外。但是，圖像具有透明度，可以顯示邊緣以外的背景顏色。頁腳的高度在Ems中，而邊界圖像的高度是46像素。

如何在保持其靈活性（Ems）的同時讓邊框出現在背景顏色之外？

<div id="footer"> 

<br> 
<p>Copyright (c) 2008</p> 
<br> 

body { 
background-color: black; 
} 

#footer { 
border-style: solid; border-width: 46px 0px 0px; 
-moz-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
-webkit-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
-o-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 fill repeat; 

background-color: pink; 
background-repeat: repeat; 
text-align: center; 
color: #ffffff; 
height: 6em; 
width: 100%; 
} 

Answer 1

的How to hide the background underneath the border

使用background-clip: padding-box重複不斷的背景顏色從出血到你的邊界圖像。

http://jsfiddle.net/efDuN/13/

Answer 2

也可以在另一DIV添加到將包含所有頁腳內容頁腳。

<div id="footer"> 
    <div id="footer_content"> 
     <br> 
     <p>Copyright (c) 2008</p> 
     <br> 
    </div> 
</div><!--footer--> 

保持在頁腳邊框，使footer_content DIV有粉紅色的背景。

http://jsfiddle.net/efDuN/11/

Answer 3

這是一個簡單的解決方案，其也可以容易地編輯。

所有，你需要做的就是修改HTML這樣：

<div id="footer"> 
    <div id="footerTop"></div> 
    <div id="footerBottom"> 
     <br/> 
     <p>Copyright (c) 2008</p> 
     <br/> 
    </div> 
</div> 

，並添加以下CSS：

#footerTop { 
    width: 100%; 
    /*background-color:Orange;*/ 
    /*border-top-image*/ 
    border-style: solid; 
    border-width: 46px 0px 0px; 
    -moz-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
    -webkit-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
    -o-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
    border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 fill repeat; 
} 

#footerBottom { 
    background-color: pink; 
    background-repeat: repeat; 
    text-align: center; 
    color: #ffffff; 
    height: 6em; 
    width: 100%; 
} 

你可以在這裏看看：http://jsfiddle.net/dLUmm/

希望這有助於！