Question

我正在尝试创建一个带有顶部图像边框和背景颜色的页脚。但是，图像中的透明度会显示边缘以外的背景颜色。页脚的高度为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/

希望这会有所帮助!!

如何使图像边框显示在背景颜色之外

3 个答案: