css sprites （css拼圖合成）使用

標籤：style   blog   http   color   io   os   使用   strong   for   

什麼是css sprites

     頁面上的 ICON，欄目背景，圖片按鈕有規則的合并一張背景圖

     用background-position來實現背景圖片的定位

常用css sprites工具

1、CSS Satyr

     可以拖動排列/自動產生CSS大圖片

     

                                           

                                         

.pic {background-image: url("CSS Satyr.png"); display: block;}.pic_5 {background-position: -140px -0px; width: 16px; height: 16px; }.pic_1 {background-position: -0px -0px; width: 16px; height: 16px; }.pic_2 {background-position: -35px -0px; width: 16px; height: 16px; }.pic_3 {background-position: -70px -0px; width: 16px; height: 16px; }.pic_4 {background-position: -105px -0px; width: 16px; height: 16px; }

 

2、CSS 圖片拼合產生器

     線上合成工具

      

css sprites （css拼圖合成）使用