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）中？根据{{3}}，支持SVG作为CSS背景图像，但不会显示。

Answer 1

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

必须将此添加到我的.htaccess文件中：

AddType image/svg+xml .svg .svgz

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

Answer 2

我遇到了同样的问题，虽然在我的情况下，问题不在于内容类型。事实证明，我必须在URL周围添加引号才能使其工作，即：

background-image: url('/path/to/my.svg');

...不是：

background-image: url(/path/to/my.svg);

我知道这不是OP遇到的问题，但是这里发布这个问题是为了其他遇到与我相同问题的人的利益而来到这个主题。

Answer 3

我通过在.htaccess文件中添加以下代码来修复此问题。

<ifModule mod_headers.c>
    <FilesMatch "\.(svg|svgz)$">
    Header set Content-Type "image/svg+xml"
    </FilesMatch>
</IfModule>

参考：

以上回答https://stackoverflow.com/a/22442942/1461060是正确的
https://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

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

3 个答案: