SVG背景向下兼容優雅降級方法

網上有一種方法

background-image:url(fallback.png);
background-image:url(image.svg),none;

利用的技術是CSS3多背景，若是支持多背景，則使用svg，不然使用png。
實際上，支持多背景的瀏覽器並不是都支持svg背景，上面只對IE有效。IE從IE9開始同時支持多背景和svg背景，

通過測試，火狐和安卓瀏覽器中都是先支持多背景，後支持svg背景，
因此火狐和安卓安卓的低版本會沒法顯示圖片，

我改一下

.twa-heart{ background-image:url(fallback.png);}
@media (-webkit-transform-3d),(min--moz-device-pixel-ratio:0),(-ms-high-contrast:active),(-ms-high-contrast:none),screen\0{
    :root .twa-heart{ background-image:url(image.svg);}
}

先保證有圖顯示，具備高版本瀏覽器特徵的，使用svg背景，
我這裏用-webkit-transform-3d區分安卓支持svg背景的版本，
能夠保證都有圖顯示，只是chrome10如下瀏覽器即便支持svg背景的，也顯示png。可是也過得去