精靈圖，背景圖，圖片是一個網頁的重要組成部分，所以學習與整理就變得有點重要了。
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。
大部分情況下，精靈圖都是網頁美工做。
我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決於最寬的那個背景。
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 25px; height: 25px; background: url("images/taobao.png"); background-position: 0px 0px; } div:hover { background-position: 0px -89px; } /*如果使用精靈圖:坐標:只有0或者負數*/ </style> </head> <body> <div></div> </body> </html>
二：背景圖片和插入圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-css背景圖片和插入圖片的區別.html</title> <style> div{ width: 200px; height:200px; background-color: red; } .box1{ background-image: url("images/image.png"); background-repeat: no-repeat; background-position: right bottom; } </style> </head> <body> <!-- 1,背景圖片和插入圖片的區別? (1),背景圖片僅僅是一個裝飾,你不會占用位置,插入圖片會占用位置 (2),背景圖片有定位屬性,很方便的控制圖片的位置,插入圖片沒有定位屬性 (3),插入圖片的語義比背景圖片的語義要強,所以在企業開發中你的圖片如果從想讓搜索引擎收錄,那么推薦使用插入圖片 --> <div class="box1">我是一個文字</div> <div class="box2"> <img src="images/image.png" alt=""> 我是文字 </div> </body> </html>