css 背景标签视网膜图像支持多个浏览器的新功能，未在 ff ie 中显示

Question

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

我正在使用

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

我在 Mac 上的 Safari 工作正常，Chrome 在 Windows 上工作，但是在 Windows 上的 Internet Explorer 和 Firefox 没有图像显示。

我想也许可以添加背景：url(images/myimage.png) 比如：

 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.

css 背景标签视网膜图像支持多个浏览器的新功能，未在 ff ie 中显示

new to css background tag retina image support on multiple browsers, not showing in ff ie

css

retina