SVG背景向下兼容优雅降级方法

2019独角兽企业重金招聘Python工程师标准>>>

网上有一种方法

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。但是也过得去

转载于:https://my.oschina.net/linsk1998/blog/1840840