CSS Sprite

切圖技巧之怎麼使用ps定位CSS Sprite圖片

 

作網站的時候咱們會用到CSS Sprite技術把不少背景圖片整合起來作成一張圖片，這樣能夠減小對服務器的請求數，減少文件的大小，加快網頁訪問的速度，那麼寫css的時候怎麼定位每一個小圖片的位置座標呢？

作網站的時候咱們會用到CSS Sprite技術把不少背景圖片整合起來作成一張圖片，這樣能夠減小對服務器的請求數，減少文件的大小，加快網頁訪問的速度，那麼寫css的時候怎麼定位每一個小圖片的位置座標呢？其實很簡單，好比咱們有下面這張圖片

 

如今咱們的目標是要把中間的站長圈logo定位在咱們的h1標籤裏，那怎麼作呢？

第一步，把圖片拖進ps裏，在站長圈logo四周拉4條參考線，要想拉的精確，能夠放大圖片，用選框工具拉出你須要的長寬，這裏就不贅述了。如圖：

第二步，肯定logo的寬和高。用ps的矩形選框工具沿着logo四周的參考線拉出選框，調出信息面板，就能夠看見寬高的數值了，如圖：

 

第三步，肯定logo在整張圖片裏的座標。仍是用矩形選框工具，沿着圖片左上角到logo左上角拉一個選框，要貼着參考線拉，信息面板顯示的寬高就是logo左上角的座標了，如圖：

 

第四步，固然是新建一個html文件，建立一個h1標籤，把咱們獲取的這4個數值分別放進相應的css代碼裏嘍，代碼以下：

css：

1	*{ padding:0; margin:0;}

2

3	.mylogo{ width:250px; height:84px; background:url(demo.png) no-repeat -68px-142px;}

4

5	.logo a{ display:block; width:250px; height:84px; text-indent:-9999px;}

html代碼：

1

站長圈

好了，預覽一下效果吧，這裏爲了看得清楚，給h1加了一個紅色邊框border:1px solid red;