背景（background)及雪碧圖(CSS Sprite)
background屬性
是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個複合屬性，它能夠分解成以下幾個設置項：
background-color 設置背景顏色
background-image 設置背景圖片地址
background-repeat 設置背景圖片如何重複平鋪
background-position 設置背景圖片的位置
background-attachment 設置背景圖片是固定仍是隨着頁面滾動條滾動
實際應用中，咱們能夠用background屬性將上面全部的設置項放在一塊兒，並且也建議這麼作，這樣作性能更高，並且兼容性更好。
好比：「background: #00FF00 url(bgimage.gif) no-repeat left center fixed」。
這裏面的「#00ff00」是設置background-color；「url(bgimage.gif)」是設置background-image；「no-repeat」是設置background-repeat；「left center」是設置background-position；「fixed」是設置background-attachment，各個設置項用空格隔開，有的設置項不寫也是能夠的，它會使用默認值。css
舉例：
下面這些例子使用下面這張圖片作爲背景圖：html
一、「background:url(bg.jpg)」，默認設置一個圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。svg
二、「background:cyan url(bg.jpg) repeat-x」，橫向平鋪盒子，盒子其餘部分顯示背景顏色「cyan」。性能
三、「background:cyan url(bg.jpg) repeat-y」，縱向平鋪盒子，盒子其餘部分顯示背景顏色「cyan」。字體
四、「background:cyan url(bg.jpg) no-repeat」，背景不重複，背景和盒子左上角對齊，盒子其餘部分顯示背景顏色「cyan」。url
五、「background:cyan url(bg.jpg) no-repeat left center」，背景不重複，背景和盒子左中對齊，盒子其餘部分顯示背景顏色「cyan」。spa
六、「background:cyan url(bg.jpg) no-repeat right center」，背景不重複，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其餘部分顯示背景顏色「cyan」。設計
相關代碼：3d
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px; } .bg1{background:cyan url(bg.jpg);} .bg2{background:cyan url(bg.jpg) repeat-x;} .bg3{background:cyan url(bg.jpg) repeat-y;} .bg4{background:cyan url(bg.jpg) no-repeat;} .bg5{background:cyan url(bg.jpg) no-repeat left center;} .bg6{background:cyan url(bg.jpg) no-repeat right center;} </style> </head> <body> <div class="backshow bg1"></div> <div class="backshow bg2"></div> <div class="backshow bg3"></div> <div class="backshow bg4"></div> <div class="backshow bg5"></div> <div class="backshow bg6"></div> </body> </html>
例子說明：
代碼中使用到的背景圖片，能夠直接在頁面上的背景圖片上點右鍵另存下來，命名爲：「bg.jpg」，而且和網頁文件存在同一個目錄下。code
關於背景圖片的background-position的設置，設置背景圖片水平位置的有「left」、「center」、「right」，設置背景圖片垂直位置的有「top」、「center」、「bottom」，水平和垂直的屬性值兩兩組合，就能夠把背景圖設置到對齊盒子的四個角或者四個邊的中心或者盒子的正中心位置。還能夠設置具體的像素值來把背景圖片精確地定位到盒子的某個位置，特別是對於背景圖片尺寸大於盒子尺寸的這種狀況，咱們能夠用數值定位，截取大圖片的某一塊作爲盒子的背景。
好比說，咱們想把下邊的盒子用右邊的圖片做爲背景，而且讓背景顯示圖片中靠近底部的那朵花：
用上面中間那張圖片做爲左邊那個比它尺寸小的盒子的背景，若是不設置background-position，默認背景圖的左上角會和盒子的左上角對齊，若是設置，能夠用兩個數值定位背景圖，上面右邊的實現效果設置爲：「background:url(location_bg.jpg) -110px -150px」，第一個數值表示背景圖相對於本身的左上角向左偏移110px，負值向左，正值向右，第二個數值表示背景圖相對於本身的左上角向上偏移150px，負值向上，正值向下。
實現原理示意圖：
對應代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px; } .bg{width:94px; height:94px; border:3px solid #666; background:url(location_bg.jpg) -110px -150px; } </style> </head> <body> <div class="bg"></div> </body> </html>
CSS雪碧圖
即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術。通俗來講：將小圖標合併在一塊兒以後的圖片稱做雪碧圖，每一個小圖標的使用須要配合background-position來獲取，也就是利用css的背景定位來顯示須要顯示的圖片部分。
雪碧圖與字體圖標優劣前面咱們已經說了可使用 iconfont 來搞圖標，如今咱們又介紹了雪碧圖，那麼這兩種辦法對一些圖標的處理都有什麼優劣呢？總得來講，使用字 iconfont 或者雪碧圖都存在着相應的優勢和缺點。所以咱們須要結合各自的優劣，來綜合考慮使用哪一種方案。雪碧圖的優點 圖標更美觀 因爲 iconfont 的圖標只能設置單色，而雪碧圖的圖標因爲是圖片，因此能展示出更爲美觀的圖標效果。 製做成本更低 iconfont 的製做較爲麻煩，須要設計師按照規範，一一製做圖標的 svg 文件。而雪碧圖的製做只需合併圖片便可，在製做成本上更低。雪碧圖的劣勢 高清屏下會失真（第三章會介紹） 在 2x 的設備像素比的屏幕上，若是要達到和文字同樣的清晰度，圖片的寬度須要實際顯示大小的兩倍，不然看起來會比較模糊。 雪碧圖不方便變化 雪碧圖本質上是一張靜態的圖片，所以沒法靈活地經過樣式去動態改變圖片圖標的顏色和其餘效果。
- 1. CSS Sprite雪碧圖
- 2. css Sprite雪碧圖
- 3. css sprite 雪碧圖
- 4. css背景雪碧圖等
- 5. CSS Sprite——CSS雪碧圖
- 6. CSS Sprite 雪碧圖製做
- 7. 關於css雪碧圖sprite
- 8. CSS Sprite雪碧圖應用
- 9. No.006 雪碧圖CSS Sprite
- 10. compass與css sprite（雪碧圖）
- 更多相關文章...
- • ionic 背景層 - ionic 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • Flink 數據傳輸及反壓詳解
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS Sprite雪碧圖
- 2. css Sprite雪碧圖
- 3. css sprite 雪碧圖
- 4. css背景雪碧圖等
- 5. CSS Sprite——CSS雪碧圖
- 6. CSS Sprite 雪碧圖製做
- 7. 關於css雪碧圖sprite
- 8. CSS Sprite雪碧圖應用
- 9. No.006 雪碧圖CSS Sprite
- 10. compass與css sprite（雪碧圖）