你能让 svg 图像显示为背景...即使在 Internet Explorer 中？答案

【问题标题】：Can you make svg images display as backgrounds... even in Internet Explorer?你能让 svg 图像显示为背景...即使在 Internet Explorer 中？
【发布时间】：2012-08-28 17:41:57
【问题描述】：

我使用 SVG 图像作为背景图像。我的 CSS 如下所示：

background:url('image.svg');

问题是它们没有出现在 IE8 或更早版本上。

有什么办法可以使这个工作吗？或者也许只为 IE 指定一个后备？（我不想用其他浏览器的 gif 替换它们。）

现场示例：HERE

【问题讨论】：

标签： css internet-explorer svg cross-browser

【解决方案1】：

我遇到了同样的问题并使用了this solution。为此，您需要拥有 svg 和 png 的图像副本。比这样写css：

.twitter-logo {
  width: 200px;
  height: 200px;
  background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
  background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}

诀窍在于 IE8 doesn't support rgba，因此 IE8 会忽略第二个背景定义。

根据svg support in other browsers，Android Browser 2.3- 和 Firefox 3.6仍然存在问题，因为它们支持 rgba 并且不支持t 支持 svg。

这里也是jsfiddle example。

【讨论】：

【解决方案2】：

我不知道如何让 IE8 使用 SVG 作为背景图像。如果 IE8 支持对您很重要，您有两个真正的选择：

为 IE8 和其他不支持后台 SVG 的浏览器提供 a PNG fallback
将 SVG 放置在页面中而不是背景中，使用 CSS 将其置于其他所有内容的后面，然后使用 SVG Web 之类的内容在 IE8 中提供支持

【讨论】：

这真的很有帮助。这正是我一直在寻找的那种东西。不幸的是，选项#1 对于这个项目来说有点太小了，正如你所指出的，#2 似乎要求 SVG 图像在 HTML 而不是 CSS 背景中。我可能不走运。在我放弃思考之前，我刚刚了解到 modernizr.com">Modernizr</a> 可以测试 SVG 支持。所以这最终可能会证明是富有成效的。感谢您启发这个探索方向。