您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS中Sprites有什么用,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
CSS Sprites是一種性能優(yōu)化技術(shù),是一種將多個圖像組合成單個圖像文件以在網(wǎng)站上使用的方法,以提高性能;也被稱為css 精靈圖。
為什么要使用Sprites(精靈圖)?
網(wǎng)頁通常包含多個圖像。這些包括圖標,按鈕,徽標,相關(guān)圖片和其他圖形。當頁面中加載圖像時,瀏覽器向服務(wù)器發(fā)出HTTP請求。分別加載每個圖像需要多次調(diào)用HTTP服務(wù)器,這可能導致下載時間變慢以及帶寬使用率過高。
CSS Sprites會將多個圖像組合成一個稱為精靈表或拼貼圖的單個圖像,用戶不下載多個文件,而是下載單個文件并通過偏移文件顯示必要的圖像(或精靈圖)。
這樣可以減少對服務(wù)器的調(diào)用、減少呈現(xiàn)網(wǎng)頁所需的下載次數(shù),節(jié)省帶寬并縮短用戶端的下載時間,減少網(wǎng)絡(luò)擁塞。
如何使用CSS Sprites(精靈圖)?
因為CSS Sprites是一張多個圖像組合成單個圖像,在精靈表中多個圖像會被放置在網(wǎng)格狀圖案里,呈現(xiàn)網(wǎng)狀分布。
當需要特定圖像(精靈圖)時,一般會通過CSS background-images屬性引用精靈表,在通過CSS background-position屬性對其進行偏移定位得到所需的精靈圖,然后以像素為單位定義精靈圖的大小。
使用Sprites(精靈圖)的實例
代碼示例:
html代碼:
<ul class="menu"> <li class="firefox"><a href="#">Firefox</a></li> <li class="chrome"><a href="#">Chrome</a></li> <li class="ie"><a href="#">Explorer</a></li> <li class="opera"><a href="#">Opera</a></li> <li class="safari"><a href="#">Safari</a></li> </ul>
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; }
效果圖:
當鼠標懸停到一個精靈圖上時:
動態(tài)效果:
以上是“CSS中Sprites有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。