网上有一种方法
- 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。但是也过得去