CSS Sprites是一種性能優化技術，是一種將多個圖像組合成單個圖像文件以在網站上使用的方法，以提高性能，也被稱為css精靈圖。

CSS Sprites是一種性能優化技術，是一種將多個圖像組合成單個圖像文件以在網站上使用的方法，以提高性能；也被稱為css 精靈圖。

為什么要使用Sprites(精靈圖)？

網頁通常包含多個圖像。這些包括圖標，按鈕，徽標，相關圖片和其他圖形。當頁面中加載圖像時，瀏覽器向服務器發出HTTP請求。分別加載每個圖像需要多次調用HTTP服務器，這可能導致下載時間變慢以及帶寬使用率過高。

CSS Sprites會將多個圖像組合成一個稱為精靈表或拼貼圖的單個圖像，用戶不下載多個文件，而是下載單個文件并通過偏移文件顯示必要的圖像(或精靈圖)。

這樣可以減少對服務器的調用、減少呈現網頁所需的下載次數，節省帶寬并縮短用戶端的下載時間，減少網絡擁塞。

如何使用CSS Sprites(精靈圖)？

因為CSS Sprites是一張多個圖像組合成單個圖像，在精靈表中多個圖像會被放置在網格狀圖案里，呈現網狀分布。

當需要特定圖像(精靈圖)時，一般會通過CSS background-images屬性引用精靈表，在通過CSS background-position屬性對其進行偏移定位得到所需的精靈圖，然后以像素為單位定義精靈圖的大小。

使用Sprites(精靈圖)的實例

精靈圖表：

代碼示例：

html代碼：

• Firefox
• Chrome
• Explorer
• Opera
• Safari

css代碼：ul.menu {

list-style-type: none;

width: 400px;

}

ul.menu li {

padding:20px 5px;

font-size: 16px;

float: left;

font-family: "Trebuchet MS", Arial, sans-serif;

}

ul.menu li a {

height: 50px;

line-height: 50px;

display: inline-block;

padding-left: 60px; /* To sift text off the background-image */

color: #3E789F;

background:url(Sprites.png) no-repeat; /* As all link share the same background-image */

}

ul.menu li.firefox a {

background-position: 0 0;

}

ul.menu li.chrome a {

background-position: 0 -100px;

}

ul.menu li.ie a {

background-position: 0 -200px;

}

ul.menu li.safari a {

background-position: 0 -300px;

}

ul.menu li.opera a {

background-position: 0 -400px;

}

ul.menu li.firefox a:hover {

background-position: 0 -50px;

}

ul.menu li.chrome a:hover {

background-position: 0 -150px;

}

ul.menu li.ie a:hover {

background-position: 0 -250px;

}

ul.menu li.safari a:hover {

background-position: 0 -350px;

}

ul.menu li.opera a:hover {

background-position: 0 -450px;

}

效果圖：

當鼠標懸停到一個精靈圖上時：

動態效果：

總結：以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。

總結

以上是生活随笔為你收集整理的css的sprites什么意思,CSS Sprites是什么的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。