css - 新的 css 背景标签视网膜图像支持多种浏览器，不显示在 ff ie 中

Question

我第一次开发支持 Retina 图像的网页，

我在用

   background: -webkit-image-set( url(images/myimage.png)    1x,
                           url(images/myimage_2x.png) 2x);

我在 Mac 上使用 Safari 可以正常工作，在 Windows 上也可以使用 Chrome，但是在 Windows 上使用 Internet Explorer 和 Firefox 时没有显示任何图像。

我想也许可以添加 background: url(images/myimage.png) like:

 background: -webkit-image-set( url(images/myimage.png)    1x,
                           url(images/myimage_2x.png) 2x);
 background: url(images/myimage.png)

并将其用作后备是正确的方法，虽然现在可以在 Internet Explorer 和 Firefox 中显示图像，然后我在 Safari 上丢失了我的 Retina 版本(它现在只加载标准分辨率图像)。

如果有人能告诉我如何在 Mac 上为 Safari 提供 Retina 支持，同时在 Windows 等上为 IE 和 FF 浏览器提供回退，请告诉我正确的方法。

任何帮助都会很棒

Answer 1

-webkit- 是 Chrome 和 Safari(现在是 Opera)独有的。您必须提供供应商特定的标签，以便 CSS 获取。

关于您的问题，截至目前 image-set 属性不适用于 IE 或 Firefox。你可以看到这个Caniuse data .