代码之家 › 专栏 › 技术社区 › Julian

CSS3边界图像的透明PNG问题

css3 transparency png html5

2

Julian · 技术社区 · 15 年前

我在用 border-image 具有透明部分的PNG图像。问题是国防部 background-color 设置黑色。当我申请 border-radius 模式的透明部分显示了DIV的黑色,而不是包含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;
}

2 回复 | 直到 13 年前

1

2

Nick Larsen 15 年前

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

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

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

2

7

Sebastian Fastner 14 年前

可以将background clip设置为padding box,将background color size设置为padding box(无边框):

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

见 http://css-tricks.com/transparent-borders-with-background-clip/ 更多信息。