jQuery和svg文件

Question

我正在开发一个网站，并希望实现svg文件来帮助关于视网膜显示器，但想要回退png文件作为备份。 这是html/js/css;

<div id="band"> 
</div> <!--band--> 

<script> 
     $(document).ready(function() { 
       if (Modernizr.inlinesvg) { 
       //SVG. 
      $('#band').html('<img src="barbGradient.svg" />'); 
       } else { 
       //No SVG. 
      $('#band').html('<img src="barbGradient.png" />'); 
      } 
     }); 
</script> 

这是css;

} 

.no-inlinesvg div#band { 
position: relative; 
top: -950px; 
background-repeat: repeat-x; 
background-image: url('../_images/barbGradient.png'); 
z-index: -1; 

} 

.inlinesvg div#band { 
position: relative; 
top: -950px; 
background-repeat: repeat-x; 
background-image: url('../_images/barbGradient.svg'); 
z-index: -1; 
} 

所有的浏览器都渲染可怕！我知道我可以以不同的分辨率包含两个png，但我发现js方法更聪明！任何帮助，将不胜感激！

Answer 1

我会坚持PNG解决方案。 99.5％的用户不会注意到。 HTML spec尚未准备好（编辑草案），并且hacky实施的成本超过IMO的好处。如果你仍然想要这个，请查看this solution。但再次，这次与填充工具开发商的报价：

“注：此支持断点许多迅速增加的大小到DOM并增加实施和维护的时间，所以应谨慎使用这种技术”