css3边框图像的透明png问题答案

【问题标题】：css3 border-image's transparent png issuecss3边框图像的透明png问题
【发布时间】：2011-05-02 10:11:52
【问题描述】：

我将border-image 与具有透明部分的PNG 图像一起使用。问题是 div 将 background-color 设置为黑色。当我应用border-radius 时，图案的透明部分显示的是 div 的黑色，而不是包含 div 的元素的背景。

如何让border-radius 忽略 div 的颜色。下面是有问题的代码。

HTML

<header>
    <div  class="outerColumn">
        <div class="column clearfix">
            <h1>Company</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">My Work</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">Elements</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

CSS

body > header {
   position:fixed;
   top:0;
   left:0;
   z-index:2;

   border-bottom:10px solid #0e0e0e;
   -moz-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
   -webkit-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
   border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
}


header, footer {
   width:100%;
   background-color:#0e0e0e;
   clear:both;
}

【问题讨论】：

标签： html png transparency css

【解决方案1】：

您可以将 background-clip 设置为 padding-box 以将背景颜色大小设置为无边框的填充框：

-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;

【讨论】：

【解决方案2】：

将边框放在具有透明背景的包装上。

<div id="HeaderBorder">
    <header>
        ...
    </header>
</div>

<style type="text/css">
    #HeaderBorder { /* border image stuff + transparent background */ }
</style>

【讨论】：

不喜欢为 css 添加额外 div 的想法，但它可以工作。
你里面已经有一堆包装了。您是否尝试过仅将背景颜色放在其中一个上，并使标题背景透明？