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