CSS 雪碧圖

標籤：cto   tricks   方式   inline   lang   pre   png   containe   file   

引言Edit

雪碧圖被運用在眾多使用了很多小表徵圖的網站上。相對於把每張小表徵圖以.png格式檔案的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對記憶體和頻寬更加友好。 

實現Edit

假設我們通過.toolbtn的類，為應用該類的各元素提供一張背景圖片：

<style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } </style>

背景位置，可以通過在background的url()直接定義X,Y軸的值，或者通過background-position屬性來添加。例如：

<style> #btn1 {background-position: -20px 0px} #btn2 {background-position: -40px 0px} </style>

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假設這兩個元素的都添加了toolbtn類，應用了上面樣式定義的圖片效果）

類似的，你也可以使用下面的方式添加hover的狀態：

#btn:hover {background-position: [pixels shifted right]px [pixels shifted down]px;}

深入閱讀

完整的 demo: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

CSS 雪碧圖