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属性，而不能使用在“”标签中。