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並增加實施和維護的時間，所以應謹慎使用這種技術」