CSS Sprites怎么用

這篇文章主要介紹“CSS Sprites怎么用”，在日常操作中，相信很多人在CSS Sprites怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS Sprites怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　為什么要使用Sprites（精靈圖）？

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

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

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

　　如何使用CSSSprites（精靈圖）？

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

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

　　使用Sprites（精靈圖）的實例

　　精靈圖表：

　　代碼示例：

　　html代碼：

　　<ulclass="menu">

　　<liclass="firefox"><ahref="#">Firefox</a></li>

　　<liclass="chrome"><ahref="#">Chrome</a></li>

　　<liclass="ie"><ahref="#">Explorer</a></li>

　　<liclass="opera"><ahref="#">Opera</a></li>

　　<liclass="safari"><ahref="#">Safari</a></li>

　　</ul>

　　css代碼：

　　ul.menu{

　　list-style-type:none;

　　width:400px;

　　}

　　ul.menuli{

　　padding:20px5px;

　　font-size:16px;

　　float:left;

　　font-family:"TrebuchetMS",Arial,sans-serif;

　　}

　　ul.menulia{

　　height:50px;

　　line-height:50px;

　　display:inline-block;

　　padding-left:60px;/*Tosifttextoffthebackground-image*/

　　color:#3E789F;

　　background:url(Sprites.png)no-repeat;/*Asalllinksharethesamebackground-image*/

　　}

　　ul.menuli.firefoxa{

　　background-position:00;

　　}

　　ul.menuli.chromea{

　　background-position:0-100px;

　　}

　　ul.menuli.iea{

　　background-position:0-200px;

　　}

　　ul.menuli.safaria{

　　background-position:0-300px;

　　}

　　ul.menuli.operaa{

　　background-position:0-400px;

　　}

　　ul.menuli.firefoxa:hover{

　　background-position:0-50px;

　　}

　　ul.menuli.chromea:hover{

　　background-position:0-150px;

　　}

　　ul.menuli.iea:hover{

　　background-position:0-250px;

　　}

　　ul.menuli.safaria:hover{

　　background-position:0-350px;

　　}

　　ul.menuli.operaa:hover{

　　background-position:0-450px;

　　}

到此，關于“CSS Sprites怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！