css-sprite 雪碧圖的使用,合併多張小圖,背景圖片當按鈕的設置

背景圖片基礎:

使用background-image來設置背景圖片

語法: background-image:url(相對與css的路徑)

若是背景圖片大於元素，默認會顯示圖片的左上角

若是背景圖片和元素同樣大，則會將背景圖片所有顯示

若是背景圖片小於元素大小，則會默認將背景圖片平鋪以充滿元素

能夠同時爲一個元素指定背景顏色和背景圖片

這樣背景顏色將會做爲背景圖片的底色

般狀況下設置背景圖片時都會同時指定一個背景顏色(由於加載外部圖片須要必定的時間.再圖片加載出來以前.會先顯示顏色)

背景圖片默認是貼着元素的左，上角顯示

縮寫:

background(注意 若是沒有指定其中的某個屬性,則會採用默認值.好比用background只指定了背景圖片.沒有顏色  那麼會使用默認的透明色覆蓋掉前面單獨設置的顏色)

經過該屬性能夠同時設置全部背景相關的樣式

沒有順序的要求，誰在前誰在後都行,也沒有數量的要求

雪碧圖按鈕例子(css-sprite)

用到的屬性:

background-image:url();

background-position:0px 0px;/*座標*/

一般若是給按鈕的三個狀態分別設置三張背景圖片,在網速較慢的時候,切換狀態時會出現閃爍的狀況,那是由於

當hover被觸發時，瀏覽器纔去加載hover . png

當active被觸發時，瀏覽器纔去加載active. png

因爲加載圖片須要- 定的時間，因此在加載和顯示過程會有-段時間，背景圖片沒法顯示，致使出現閃爍的狀況

爲了解決該問題，能夠將三個圖片整合爲一張圖片，這樣能夠同時將三張圖片一塊兒加載，就不會出現閃爍的問題了

而後在經過background-position來切換要顯示的圖片的位置,這種技術叫作圖片整合技術(css-sprite)也就是常說的雪碧圖

原文地址:http://www.qingzhouquanzi.com/107.html

    此方法的優勢:

1.將多個圖片整合爲-張圖片裏，瀏覽器只須要發送一次請求，能夠同時加載多個圖片，提升訪問效率，提升了用戶體驗。

2.將多個圖片整合爲一-張圖片，減少了圖片的總大小，提升請求的速度，增長了用戶體驗