image-set在retina屏幕下图片自适应

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

.soso .logo .qqlogo {
  display: block;
  width: 134px;
  height: 44px;
  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-repeat: no-repeat;
}



这个是 腾讯官网 logo的一个css代码，从代码看，腾讯前端师使用了一种新的技术，-webkit-image-set, 在这里我介绍一下webkit这个属性的含义，它主要是用来在 Retina屏幕下的显示，比如说 苹果的 Retina 显示屏，iphone, ipad。。。

在普通屏幕或者普通分辨率下会显示 qqlogo_1x.png

在Retina屏幕或者高分辨率下会显示 qqlogo_2x.png

需要注意的是，这个是 webkit 的一个私有属性，而且 image-set是CSS4草案中的一个属性，目的就是保证图片在屏幕上的自适应。


Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。