css精灵图(雪碧图)切图
css精靈圖
為了節(jié)省網(wǎng)絡(luò)資源，通常網(wǎng)頁上小圖標(biāo)和圖片都合成在一張圖片上，到使用的時候再切圖
雪碧圖切圖簡單過程：先在ps中打開，然后通過用矩形覆蓋原來圖標(biāo)在圖片中的位置，查到目標(biāo)圖標(biāo)大小，設(shè)置寬高，通過position調(diào)整位置，找到目標(biāo)圖標(biāo)
示例：這是網(wǎng)上找到的精靈圖
1.首先，打開ps，找到打開需要切的圖片
2.然后查看窗口選項卡下信息選項是否被選中，這里需要用到信息窗口
接著，我們就會發(fā)現(xiàn)主工作區(qū)多出一個信息面板
3.選擇目標(biāo)圖標(biāo)，求出圖標(biāo)位移
比如，我們需要一個第一行，第五列的吉他圖片
先選擇矩形工具
然后畫矩形，用矩形把需要切割的圖片覆蓋掉
這樣就可以計算這個圖標(biāo)在圖片中的位置（當(dāng)然你也可以調(diào)整矩形透明度，來查看自己畫的位置是否有偏差）
這里，我們主要想知道這個圖片的長寬有多少，這個圖片距離圖片最左端位移是多少
當(dāng)我們鼠標(biāo)指向我們畫的矩形左上角頂點時，信息欄會顯示x,y。我們就知道這個圖片的位移
我們大致記錄下這時候位置x,y.(785,0) 少許有偏差也可以
為什么需要這一點呢？
因為我們要把這張圖片移動向左移動x，向上移動y，使該片上這個圖片顯示在html的背景圖片中。比如說在html中，div盒子設(shè)置大小為80px*80px,設(shè)置背景圖片時，默認(rèn)背景圖片左上角和盒子坐上角對齊，圖片只有左上角80px*80px能夠在盒子里顯示出來，剩下部分全部隱藏起來了。這時候，我們只要移動圖片讓這個圖標(biāo)能夠出現(xiàn)在顯示區(qū)域就可以了。
4.估計出圖片長寬
用鼠標(biāo)就移動到矩形左右兩端，x相減就可以得到圖標(biāo)長度，同理寬度也通過上下兩端y相減得到的
我們算出來長度大概是80px,寬度大概是80px
5.打開ide，開始寫代碼
這里我們通過div+css方式展示圖片
background-image:這個屬性是設(shè)置背景圖片url()里面代表圖片的網(wǎng)絡(luò)地址或者本地地址
background-position:設(shè)置圖片初始位移
注意：將我們得到的x,y位移加一個負(fù)號，便是現(xiàn)在圖片的位置（記得寫單位px）
為什么要加負(fù)號呢？
把該圖片想成是第四項線中，圖片位移左移動為負(fù)，向下移動為負(fù)；向右移動，向上移動為正
示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>精靈圖</title><style type="text/css">.guitar{width: 80px;height: 80px;background-position: -785px 0px;background-image: url(xu.png);}</style> </head> <body><div class="guitar"></div> </body> </html>這是最后的效果圖
總結(jié)
以上是生活随笔為你收集整理的css精灵图(雪碧图)切图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 破解企业服务支付难题，SaaS与支付如何
- 下一篇： 让高中生理解卷积——从多项式乘法开始