我怎样才能让我的形象边界出现的背景色

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/

希望这有助于！