SVG 作为背景图像答案

【问题标题】：SVG as background imageSVG 作为背景图像
【发布时间】：2014-03-24 04:14:50
【问题描述】：

我正在将 Illustrator 中的矢量（徽标）导出为 SVG (1.1) 矢量没有渐变或透明度。

当我在我的 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 吗？

谢谢

【问题讨论】：

可以加你html/css详情吗？请在 jsfiddle 中
All about SVG.
其实我是按照那个教程来的
当我使用与 Web 不同的 SVG 时，它可以工作，所以我猜这是导出问题
确保相对文件路径正确。例如，如果您的css/ 文件夹在img/ 旁边，那么您需要在../ 的路径中向上。即使用../img/logo.svg

标签： css svg background

【解决方案1】：

好的，我发现了问题。这是关于服务器的，我刚刚在我的 .htaccess 中添加了 SVG 支持

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

谢谢

【讨论】：