我在用着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;
}
您可以将background-clip设置为padding-box,以将背景颜色大小设置为无边框的padding框:
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
See http://css-tricks.com/transparent-borders-with-background-clip/了解更多信息。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)