1

I tried to use a svg for a background and it works in local but not when I upload it to an ftp.

It has a png fallback for IE and others that not support svg. But in all cases I just see the png.

(Just for the example use a red square for the svg and a very different think a logo of skype.png for the fall back): http://jsfiddle.net/snG8w/ http://codepen.io/pen/9135/2

How to put a svg in in this background?

HTML:

<div id="quadrat"></div>​

CSS:

#quadrat {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  height: 400px;
  line-height:200px;
  background-image:  url('http://mig-marketing.com/proves/retina/skype.png');
  background-image:  none,url('http://mig-marketing.com/proves/retina/rectangle.svg'), url('http://mig-marketing.com/proves/retina/skype.png');
  background-size: 100% 100%;
  background-repeat:no-repeat;
}​
4

1 回答 1

5

You are serving the svg image with a 'text/xml' mediatype. While that's technically fine, it's quite possible that browsers disallow that in scenarios like this one, where only images are allowed. Try configuring your server to send the official svg mediatype 'image/svg+xml' instead, that should work.

Some more details for how to configure your webserver can be found e.g here.

Update: added link to the svg image that gets served with 'text/xml'.

于 2012-07-05T18:07:43.263 回答