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作爲背景圖像

回答

相關問題