精靈技術的使用 · CSS

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的`background-image`、`background-repeat`和`background-position`屬性進行背景定位，其中最關鍵的是使用`background-position`屬性精確地定位。<br/> 精靈圖的使用視頻教程 **`html\media\精靈圖的使用.avi`**，使用精靈圖需要使用到 fireworks 工具，在壓縮包中提供了該軟件的安裝包和安裝步驟。 **`html\精靈圖的使用.html`** ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .aa { width: 108px; height: 110px; background-position: 0 -9px; } .n { width: 112px; height: 110px; background-position: -255px -276px; } .d { width: 97px; height: 107px; background-position: -363px -8px; } .y { width: 110px; height: 110px; background-position: -367px -556px; } </style> </head> <body> <span class="aa"></span> <span class="n"></span> <span class="d"></span> <span class="y"></span> </body> </html> ``` 顯示效果： ![](https://img.kancloud.cn/5c/5e/5c5ed0351f2b31e067760e25b3932b59_593x174.png)