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

问题描述

以下代码在 Safari 中不起作用，图像不显示.这只发生在 Safari 中，它适用于所有其他浏览器，我不知道为什么.这是 CSS 代码:

.hero {背景:url(images/cards.svg) 无重复中心中心固定；-webkit-background-size: 封面；-moz-background-size: 封面；背景尺寸:封面；高度:180px；宽度:100%；底边距:20px；}

和 HTML 代码:

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

解决方案

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

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

AddType image/svg+xml .svg .svgz

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

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;
    }

and the HTML code:

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

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.

Had to add this to my .htaccess file:

AddType image/svg+xml .svg .svgz

This helped me out: http://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

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