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

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>image-set实现Retina屏幕下图片显示</title> <style type="text/css"> #demo { background-image: url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png); background-image: -webkit-image-set(url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x, url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x); background-image: -moz-image-set(url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x, url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x); background-image: -o-image-set(url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x, url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x); background-image: -ms-image-set(url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x, url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x); width:134px; height:44px; } </style> </head> <body> <h1>image-set</h1> <div id="demo"></div> <ul> <li><b>不支持image-set：</b>在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；</li> <li><b>支持image-set：</b>如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；</li> <li><b>Retina屏幕下的image-set：</b>如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。</li> </ul> <small> Webkit内核"safari6"和“chrome21”支持CSS4的background-image新规范草案image-set。通过Webkit内核的浏览器私有属性“-webkit”，image-set为Web前端人员提供了一种解决高分辨率图像的显示，用来解决苹果公司提出的Retian屏幕显示图片的技术问题。简而言之：这个属性用来支持Web前端人员解决不同分辨率下图片的显示，特别的（Retina屏幕）。 </small> </body> </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看下面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>icon sprite for retina display</title> <style> *{ margin:0; padding:0; line-height:2; } html{ padding:30px; } ul{ list-style:none; font-size:0; margin:20px; } li{ display:inline-block; width:32px; height:32px; vertical-align:middle; border:1px dotted #eee; margin:1px; } p{ color:grey; } /* ** 注意： ** 图片要求：2x图片要是1x图片的准确2倍，sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ .sprite-icon{ background-image:url(http://topcss.org/demo/retina-background/sprite.png); background-image: -webkit-image-set( url('http://topcss.org/demo/retina-background/sprite.png') 1x, url('http://topcss.org/demo/retina-background/sprite@2x.png') 2x ); } /* ** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个 */ .icon-1{ background-position:0 0; } .icon-2{ background-position:-33px 0; } .icon-3{ background-position:-66px 0; } .icon-4{ background-position:0 -33px; } .icon-5{ background-position:-33px -33px; } .icon-6{ background-position:-66px -33px; } </style> </head> <body> <div class="wrap"> <h1>icon sprite for retina display</h1> <h2>方法二：img-set</h2> <ul> <li class="sprite-icon icon-1"></li> <li class="sprite-icon icon-2"></li> <li class="sprite-icon icon-3"></li> <li class="sprite-icon icon-4"></li> <li class="sprite-icon icon-5"></li> <li class="sprite-icon icon-6"></li> </ul> <p>为了便于对比，普通显示器下显式紫色图标，retina屏幕下显式黑色图标。</p> </div> </body> </html>

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

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