你能将svg图像显示为背景......即使在Internet Explorer中也是如此？

Question

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

background:url('image.svg');

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

有没有办法让这项工作？或者也许只为IE指定一个后备？(我不想用其他浏览器的gif替换它们.)

实例:HERE

Answer 1

我遇到了同样的问题并使用了这个解决方案.为此,你需要有一个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 不支持rgba,因为IE8忽略了第二个背景定义.

根据其他浏览器的svg支持,你仍会遇到Android Browser 2.3和Firefox 3.6的问题,因为它们支持rgba而且不支持svg.

这里也是jsfiddle的例子.

Answer 2

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

1. 为IE8和其他在后台不支持SVG的浏览器提供PNG后备
2. 将SVG放在页面而不是背景中,用CSS将其置于其他所有位置,然后使用类似SVG Web的东西在IE8中提供支持