CSS背景中的SVG不会显示在Safari中 [英] SVG in CSS backgrounds not showing up in Safari

问题描述

以下代码在Safari中不起作用，图像不显示。这只发生在Safari，它在所有其他浏览器，我无法弄清楚为什么。这里是CSS代码：

The following code doesn't work in Safari, and the image doesn't show up. This only happens in Safari, it works in all other browsers, I can't figure out why. Here is the CSS code:

.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背景图片，但不会显示。

Update: The above code works when converting the "cards.svg" into a JPG, but I would rather work with SVG as they load faster. Why would the SVG not show up in Safari (7.0.1)? According to http://caniuse.com, SVG as a CSS background image is supported but it won't display.

推荐答案

这是因为我的服务器提供的内容类型不正确。

It's because my server is serving it with an incorrect content-type.

这到我的.htaccess文件：

Had to add this to my .htaccess file:

AddType image/svg+xml .svg .svgz

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

这篇关于CSS背景中的SVG不会显示在Safari中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！