我第一次开发支持 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 浏览器提供回退,请告诉我正确的方法。
任何帮助都会很棒
最佳答案
-webkit-
是 Chrome 和 Safari(现在是 Opera)独有的。您必须提供供应商特定的标签,以便 CSS 获取。
关于您的问题,截至目前 image-set
属性不适用于 IE 或 Firefox。你可以看到这个Caniuse data .
关于css - 新的 css 背景标签视网膜图像支持多种浏览器,不显示在 ff ie 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29070642/