---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

image-set实现Retina屏幕下图片显示

前端开发 蚂蚁 1479℃ 0评论

http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html

提示:你可以先修改部分代码再运行。

#demo{
        background-image: url(assets/no-image-set.png); 
        background-image: -webkit-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        background-image: -moz-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        background-image: -o-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        background-image: -ms-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        width:134px;
        height:44px;
    }
  • 不支持image-set:在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
  • 支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;
  • Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。


Webkit内核"safari6"和“chrome21”支持CSS4的background-image新规范草案image-set。通过Webkit内核的浏览器私有属性“-webkit”,image-set为Web前端人员提供了一种解决高分辨率图像的显示,用来解决苹果公司提出的Retian屏幕显示图片的技术问题。简而言之:这个属性用来支持Web前端人员解决不同分辨率下图片的显示,特别的(Retina屏幕)。

对于Sprites图使用image-set看下面

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » image-set实现Retina屏幕下图片显示

喜欢 (3)or分享 (0)
发表我的评论
取消评论

表情
(1)个小伙伴在吐槽
  1. http://blog.csdn.net/charlene0824/article/details/52451873
    蚂蚁2016-12-01 14:00 回复