CSS背景中的SVG未显示在Safari中

Question

以下代码在Safari中不起作用,图像不显示.这只发生在Safari中,它适用于所有其他浏览器,我无法弄清楚原因.这是CSS代码:

.hero {
        background: url(images/cards.svg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        height:180px;
        width:100%;
        margin-bottom:20px;
    }

和HTML代码:

<div class="hero"></div>

更新:上面的代码在将"cards.svg"转换为JPG时有效,但我宁愿使用SVG,因为它们加载速度更快.为什么SVG不会出现在Safari(7.0.1)中？根据http://caniuse.com,支持SVG作为CSS背景图像但不会显示.

Answer 1

这是因为我的服务器使用不正确的内容类型为其服务.

不得不将此添加到我的.htaccess文件中:

AddType image/svg+xml .svg .svgz

这帮助了我:http://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/