html - 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/