css - 你可以让 svg 图像显示为背景......即使在 Internet Explorer 中？

Question

我使用 SVG 图像作为背景图像。我的 CSS 看起来像这样:

background:url('image.svg');

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

有什么办法可以实现吗？或者只为 IE 指定后备？ (我不想用其他浏览器的 gif 替换它们。)

实例:HERE

Answer 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 浏览器 2.3- 和 Firefox 3.6 时仍然有问题，因为它们支持 rgba 但不支持 svg。

这是 jsfiddle example 也是。