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屬性，而不能使用在「」標籤中。