прозрачный png выпуск css3 border-image - PullRequest
Новая
       10

прозрачный png выпуск css3 border-image

2 голосов
/ 29 октября 2010

Я использую 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;
}

Ответы [ 2 ]

7 голосов
/ 02 августа 2012

Вы можете установить background-clip для padding-box, чтобы установить размер фона для поля padding без рамки: 

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

См. http://css -tricks.com / прозрачные границы с фоновым клипом / для получения дополнительной информации.

2 голосов
/ 29 октября 2010

Поместите рамку на обертку с прозрачным фоном. 

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

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