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

我正在尝试创建一个页脚，上面有图像边框和背景色。但是，图像具有透明度，显示边缘以外的背景色。页脚的高度以Ems为单位，而边框图像的高度为46像素

如何使边框显示在背景色之外，同时保持其灵活性（Ems）

---

您可以向页脚添加另一个div，该div将包含所有页脚内容

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

版权所有（c）2008

在页脚上保留边框，并使页脚内容div具有粉红色背景

---

这是一个简单的解决方案，也可以轻松编辑

您只需修改HTML，如下所示：

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

您可以在这里查看：

希望这有帮助

使用

background clip:padding box

可防止背景颜色渗入边框图像

---

请您解释否决票的原因好吗？这会添加一个额外的HTML元素，它不具有任何结构目的。OP的问题是关于CSS的边框图像属性的使用。OP的问题不要求CSS边框图像的唯一解决方案。OP只要求一个解决方案。在这个问题中没有一丝“只需要一个CSS边框图像相关的答案”。OP要求一个解决方案。我的答案是一个解决方案，尽管与你的方法不同。仅仅因为我以不同的方式实现了它（与您的答案相比），并不意味着我的答案是错误的或不正确的。因此，实际上并不需要否决票。但是，如果这让你感到巨大的自我愉悦，让你对自己感觉良好，哪怕只是一小会儿，那就开心吧！！！！谢谢你的理解，没问题。很高兴给你唯一一个自我感觉良好的时刻！！！其他答案很好，但这似乎是最简单的。我不同意这是一个重复问题如果你知道一个问题是另一个问题的重复，请投票关闭它，就像谢谢你，扎克。看起来你已经这么做了，但我不能删除我的答案。

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

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

#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%;
}