HTML&CSS基礎-雪碧圖的制作和使用
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.使用PS將3張圖片合並為一張(溫馨提示:整合圖片適合整理背景圖，如果是img引用的圖片並不使用)
1>.將准備的圖依次拖入到PS中
2>.拉一根輔助線，並點擊"圖像"--->"畫布大小"會彈出當前logo所占的畫布大小信息
3>.計算出寬度，修改畫布大小並選擇定位
4>.如下圖所示，確認寬度和定位后，點擊確定
5>.測量矩形的大小並拖拽參考線，便於后面講其它兩張圖片拖拽過來存放
6>.將hover.png和active.png的按鈕拖入到link.png途中咱們預先給它們量准備的位置
7>.雪碧圖拖拽完成，接下來就是得把咱們制作的成功保存下來了
8>.如下圖所示，點擊"文件" ---> "存儲為web所用格式",選擇圖片的存儲格式為“PNG-24”並點擊"存儲"按鈕
9>.將圖標存儲到本地
10>.圖片保存成功
二.使用咱們自己制作的雪碧圖制作按鈕背景
1>.將圖片拷貝到項目路徑
2>.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圖片按鈕</title> <style type="text/css"> /** * 做完功能以后，發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的體驗。 * * 產生閃爍的原因: * 背景圖片是以外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就需要單獨發一次http請求,但是我們 * 外部資源並不是同時加載，瀏覽器惰性的，它默認會在資源被使用時才去加載資源。也就是說，在咱們這個案例中，一 * 上來只會加載link.png這個背景圖片，由於偽類hover和active的狀態沒有馬上觸發，所以hover.png和 * active.png並不是立即加載的，而是當hover被觸發時瀏覽器才會去加載hover.png，當active被觸發時才回去 * 加載active.png。由於加載圖片需要一定的時間，所以在加載和顯示過程會有一段時間，背景圖片無法顯示，導致出現 * 閃爍的情況。當第二次再去觸發時咱們又會發現就不會出現閃爍的情況，那是因為瀏覽器使用了第一次下載圖片的緩存。 * * 解決方案: * 為了解決上述d問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起加載，就不會出現閃爍的問題了， * 然后通過background-position屬性來切換顯示圖片的位置，這種技術叫做圖片整合技術(CSS-Sprite),這種技術有 * 以下優點: * 1>.將多個圖片整合為一張圖片里，瀏覽器只需要發送一次http請求可以同時加載多個圖片(提高了訪問效率,也提高了用戶體驗) * 2>.將多個圖片整合為一張圖片，減小了圖片的總大小，提高請求的速度，增加的用戶體驗 * * 溫馨提示: * 圖片中會保存一個叫顏色表屬性，如果下載三個圖片就會保存三個圖片的顏色表，下載一個圖片只需要保存一個顏色表從而節省了一定的存儲空間 * * */ .btn{ /*將a轉換為塊元素*/ display: block; /*設置寬高*/ width: 93px; height: 29px; /*設置背景圖片*/ /*background-image: url(img/btn/link.png);*/ background-image: url(img/btn/my_btn.png); /*設置圖片不重復*/ background-repeat: no-repeat; } .btn:hover{ /*設置鼠標移入鏈接時的背景圖片*/ /*background-image: url(img/btn/hover.png);*/ background-image: url(img/btn/my_btn.png); /*當hover狀態時，希望圖片可以向左移動*/ background-position: -93px 0px; } .btn:active{ /*設置鼠標正在點擊鏈接時的背景圖片*/ /*background-image: url(img/btn/active.png);*/ background-image: url(img/btn/my_btn.png); /*當active狀態時，希望圖片可以再一次向左移動*/ background-position: -186px 0px; } </style> </head> <body> <!--創建一個超鏈接--> <a class="btn" href="#"></a> </body> </html>
3>. 瀏覽器打開以上代碼渲染結果
