css使用背景靈活展現雪碧圖

雪碧圖是把各類小圖標集合在一塊兒的png圖片，經過background-position來展現雪碧圖中不一樣位置的小圖標，好比如下圖片，在項目中要用到的小圖標不少，若是每個圖標都做爲一個png或者jpg圖片，這樣會增長很是多的網絡請求，因此把不少小圖片組合在一塊兒是一個很不錯的選擇。

好比下圖

在用background-position來展現雪碧圖以前，須要能熟練運用background(背景)屬性，這裏先簡單介紹一下background如何使用。

background有很是多的屬性，能夠設置背景顏色、背景圖片，而圖片又能選擇是否重複，以及擺放在哪一個位置。

最簡單的就是使用background-color設置背景顏色了，能夠設置預約義的顏色，如：pink/red/blue/black，能夠設置16進制顏色，如#000000，還能夠設置rgb顏色，如rbg(0,0,0)，還能夠在此基礎上增長透明度 rgba(0, 0, 0, .5)，須要注意的是，透明度僅做用於背景，不影響盒子的其它內容，演示以下

當背景須要經過複雜的圖案來進行填充時，咱們能夠藉助於背景圖片，使用background-image經過url來定義背景圖片，好比設置一個小女孩的頭像爲背景

能夠發現，背景圖在盒子內被平鋪了，這就是背景的第三個屬性，background-repeat 當不設置的時候，默認是重複（repeat），須要定義爲不平鋪時，設置no-repeat便可

咱們發現背景圖片默認會在盒子的左上角，若是想要調整背景圖片的顯示位置，比較常見的狀況是，使用背景圖片和文字配合顯示，文字和背景圖片都須要居中顯示，那此時就須要用到 background-position，可使用方位名詞，x軸使用top/center/bottom，y軸使用left/center/right，也能夠經過百分比/像素來對背景圖片進行移動，若是隻寫了一個方向的移動方式，那麼另外一個就默認爲center。

以上屬性能夠合併在一塊兒寫

background: 顏色 圖片 是否重疊 位置
// 以上居中顯示  background: #000 url(./girl.png) no-repeat center

雪碧圖的展現就是經過像素來對圖片進行移動，好比上面的雪碧圖中，選取耳機這個小圖標來進行展現，在photoshop裏打開雪碧圖，使用矩形工具框出須要展現的圖片，此時會展現屬性信息，將這些屬性分別設置到css樣式中

上面選取的戴着耳機的小圖標的寬度爲65px，高度爲50px，x軸的偏移量爲0px，y軸的偏移量爲80px，要注意的是，x軸和y軸的偏移量在定位時要取負值，由於找到小圖標的位置以後，至關於要將整個雪碧圖往上往左移，使得小圖標的位置正好在原點處

.icon {
    width: 65px;
    height: 50px;
    background: url(./res/sprite.png) no-repeat 0px -80px;
}

這樣就能指定展現想要的圖標了