SVG作为背景图像

我从Illustrator中将矢量（徽标）导出为SVG（1.1）矢量没有渐变或透明度。SVG作为背景图像

当我在我的CSS中使用SVG作为背景图像时什么都没有显示，但是当我访问图像链接（http://www.something.com/logo.svg）时，它完美地显示了我的图像。

的CSS

#site-header { 
    margin: 0; 
    padding: 0; 
    display: block; 
    width: 100%; 
    height: 62px; 
    top: 0; 
    left: 0; 
    position: fixed; 
    z-index: 2000; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    overflow: hidden; 
    background-color: #758391; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-perspective: 1000; 
    perspective: 1000; 
    -webkit-box-shadow: 0 0 2px rgba(6, 8, 8, 0.15); 
    box-shadow: 0 0 2px rgba(6, 8, 8, 0.15); 
} 

#site-header #logo { 
    display: inline-block; 
    float: none; 
    width: 10%; 
    min-width: 48px; 
    height: 100%; 
    max-height: 40px; 
    margin: 12px 0; 
    vertical-align: middle; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#site-header #logo a { 
    width: 100%; 
    height: 100%; 
    display: block; 
    background: rgba(0, 0, 0, 0) url("img/logo.svg") no-repeat center center; 
}

的HTML

<header id="site-header"> 
    <hgroup id="logo"> 
     <a href="#"> 
      <h1> 
       <span class="hide">some hidden content</span> 
      </h1> 
     </a> 
    </hgroup> 
</header>

通过时，我尝试使用img元素的SVG它不工作的方式。

任何想法为什么不使用css背景时显示我的SVG？

谢谢

来源

2014-02-22 Fredmat

可以添加你'HTML/css'细节？在jsfiddle请 – Radian

[所有关于SVG]（http://css-tricks.com/using-svg/）。 –

其实我遵循那个教程 – Fredmat

好吧，我发现这个问题。这是关于服务器的，我只是说SVG支持我的.htaccess

AddType image/svg+xml svg 
AddType image/svg+xml svgz

谢谢

来源

2014-02-24 10:46:50 Fredmat

SVG作为背景图像

回答

相关问题