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

标签 css retina

我第一次开发支持 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/

相关文章:

objective-c - Cocoa - 屏幕捕获和绘图(视网膜)

emacs - Org LaTeX 预览在视网膜显示器上是模糊的

css - 如何制作多个 DROP-shadow?

css - 是否有一种跨浏览器的方式来压缩页面上的文本?

css - 如何将自定义样式添加到 ngx-bootstrap/tooltip

html - CSS 边框在视网膜显示屏上被剪裁

javascript - 如何使用 document.getElementById 和 getElementsByClassName 做 Jasmine 测试用例以显示无 css 属性

css - 动画CSS反射

html - 您如何打开/关闭网站上的视网膜图像以检查差异?

HTML 和 CSS 在 Retina 2800x2000 上显示错误