web前端切图处理

技巧：

一. 如何在 Retina 屏幕的设备使用更高分辨率的图片

以 MacBook Pro 为例，它的标准分辨率高达 2560 x 1600，但是如果真的以这个分辨率显示网页，网页的有效区域就小的可怜，而且字也会小的无法分辨。

因此通常 OS X 都会建议用户使用推荐的分辨率 1440 x 900。也就是说，网页中的内容需要被放大约 1.78 倍。

矢量的图形和字体问题不大，但是位图在放大后就会出现失真的情况。因此，你需要针对 Retina 屏幕设备使用更高分辨率。

 

1. 使用CSS3的background-size优化苹果的Retina屏幕的图像显示，通过CSS3 Media Queries为Retina屏幕设备提供一个高分辨率的图像 （http://www.w3cplus.com/css/css-background-size-graphics.html）

"cover"值，可以让背景图像等比例放大到填满整个容器。

div { 
  background: url(logo.png) no-repeat;
  background-size: cover;
  height: 200px;
  width: 400px;
}

"contain"值可以让你的背景图像缩放到最大宽度和高度，并且让整个背景图像保持在容器内。

 

2.image-set实现Retina屏幕下图片显示(CSS4中对background-image属性定义的一种新方法，image-set)

在普通分辨率下，将调用“qqlogo_1x.png”图片，而在Retina屏幕下（比如iPhone4s,iPhone5，New iPad等IOS设备）下会调用“qqlogo_2x.png”图像，从而避免了Logo在Retina屏幕下显示不清晰的问题。

#test {
  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:200px;
  height:75px;
}

类似于不同的文本，图像也会显示成不同的：

1.  不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
2.  支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
3.  Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。

image-set真的好强大，很可惜的是，他仅支持background-image属性，而不能使用在“”标签中。