1. 程式人生 > >CSS精靈(CSS雪碧技術)

CSS精靈(CSS雪碧技術)

小編簡短的補充一下CSS精靈(也叫CSS雪碧技術)

在實戰中非常使用,使用也多我們不能遺漏。

在一些站中我們經常能看到:(已放入fireworks)

 

這是京東的小圖示的一個原圖,當然我們在使用這些小圖示時不可能是一個一個很小的圖,一般都是小圖示的一些集合然後在插圖時以定位方式擷取自己所需要的部分。

那麼實際操作非常簡單

我們將圖片放入fireworks時將自己所需要的部分切片切出來讀出寬高,切完後值得我們注意的是這個座標

插入小圖示時我們都是以背景圖進行插入

將盒子高度寬度定義成“精靈”高寬。

那麼在操作上我們在background屬性里加上這個大圖後然後,給一個no repeat 然後給一個-149px -98px 的座標定位這樣我們就能實現精確定位到所需圖片。

很簡單但非常實用需要掌握的一個知識點。