css3 border-image的透明png问题 [英] css3 border-image's transparent png issue

问题描述

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

如何获取 border-radius 以忽略div的颜色。

c $ c>< header>
< div class =outerColumn>
< div class =column clearfix>
< h1>公司< / h1>
< nav>
< ul>
< li>< a href =＃>首页< / a>< / li&
< li>< a href =＃> Portfolio< / a>< / li>
< li>< a href =＃>我的作品< / a>< / li>
< li>< a href =＃>关于我< / a>< / li>
< li>< a href =＃>元素< / a>< / li>
< li>< a href =＃>联系人< / 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; 
} 
 
 
头，页脚{
 width：100％; 
 background-color：＃0e0e0e; 
 clear：both; 
} 
  

解决方案

具有透明背景。

 < div id =HeaderBorder> 
< header> 
 ... 
< / header> 
< / div> 
 
< style type =text / css> 
 #HeaderBorder {/ * border image stuff + transparent background * /} 
< / style> 
  

I'm using border-image with a PNG image that has a transparent section. The issue is that the div has background-color set the black. When I apply border-radius, the transparent section of the pattern shows the black of the div and not the background of the element containing the div.

How do I get border-radius to ignore the color of the div. Below is the code in question.

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

解决方案

Put the border on a wrapper with transparent background.

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

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

这篇关于css3 border-image的透明png问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！