您好,登錄后才能下訂單哦!
今天小編給大家分享一下CSS怎么使用Sprite雪碧圖的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
雪碧圖的使用場(chǎng)景
靜態(tài)圖片,不隨用戶(hù)信息的變化而變化。
小圖片,容量比較?。?~3k)。
圖片加載量比較大。
目的
減少Http請(qǐng)求數(shù)量,加速內(nèi)容顯示。因?yàn)槊空?qǐng)求一次,就會(huì)和服務(wù)器建立一次鏈接,而建立鏈接是需要額外的時(shí)間的。
使用
使用雪碧圖之前,我們需要知道雪碧圖中各個(gè)圖標(biāo)的位置。
從上面的圖片不難看出雪碧圖中各個(gè)小圖標(biāo)(icon)在整張雪碧圖的起始位置,例如第一個(gè)圖標(biāo)(裙子)在雪碧圖的起始位置為 x:0,y:0,第二個(gè)圖標(biāo)(鞋子)在雪碧圖的起始位置為 x:0,y:50px,第三個(gè)圖標(biāo)(足球)在雪碧圖的起始位置為x:0,y:100px,依次類(lèi)推可以得出各個(gè)圖片相對(duì)于雪碧圖的起始位置。
以上面的雪碧圖為例(實(shí)際雪碧圖中各個(gè)小圖片的起始位置和上面的展示圖不同)用一個(gè)Demo來(lái)闡述它的使用方法。
HTML
<div> <ul class="sidebar"> <li><a href=""><span class="spr-icon icon1"></span>服裝內(nèi)衣</a></li> <li><a href=""><span class="spr-icon icon2"></span>鞋包配飾</a></li> <li><a href=""><span class="spr-icon icon3"></span>運(yùn)動(dòng)戶(hù)外</a></li> <li><a href=""><span class="spr-icon icon4"></span>珠寶手表</a></li> <li><a href=""><span class="spr-icon icon5"></span>手機(jī)數(shù)碼</a></li> <li><a href=""><span class="spr-icon icon6"></span>家電辦公</a></li> <li><a href=""><span class="spr-icon icon7"></span>護(hù)膚彩妝</a></li> <li><a href=""><span class="spr-icon icon8"></span>母嬰用品</a></li> </ul> </div>
CSS
ul li { list-style: none; margin: 0; padding: 0; } a { color: #333; text-decoration: none; } .sidebar { width: 150px; border: 1px solid #ddd; background: #f8f8f8; padding: 0 10px; margin: 50px auto; } .sidebar li { border-bottom: 1px solid #eee; height: 40px; line-height: 40px; text-align: center; } .sidebar li a {font-size: 18px;} .sidebar li a:hover {color: #e91e63;} .sidebar li .spr-icon { display: block; float: left; height: 24px; width: 30px; background: url(css-sprite.jpg) no-repeat; margin: 8px 0px;} .sidebar li .icon2 { background-position: 0px -24px;} .sidebar li .icon3 { background-position: 0px -48px;} .sidebar li .icon4 { background-position: 0px -72px;} .sidebar li .icon5 {background-position: 0px -96px;} .sidebar li .icon6 {background-position: 0px -120px;} .sidebar li .icon7 { background-position: 0px -144px;} .sidebar li .icon8 { background-position: 0px -168px;}
為什么使用雪碧圖時(shí)background-position屬性值均為負(fù)數(shù)。
上面的例子已經(jīng)闡述了如何使用雪碧圖,只不過(guò)初學(xué)者可能會(huì)對(duì)雪碧圖中的background-position屬性值為負(fù)值有所疑惑。這個(gè)問(wèn)題其實(shí)不難回答,如果細(xì)心的人應(yīng)該很早就發(fā)現(xiàn)了使用負(fù)數(shù)的根源所在。這邊用上面的Demo為例,來(lái)分析這個(gè)問(wèn)題。上面的span標(biāo)簽是一個(gè)24*30px長(zhǎng)寬的容器,在使用背景圖時(shí),背景圖的初始位置會(huì)從容器的左上角的開(kāi)始鋪滿(mǎn)整個(gè)容器,然而容器的大小限制了背景圖呈現(xiàn)的大小,超出容器部分被隱藏起來(lái)。假如設(shè)置background-position: 0 0 那么意味著,背景圖相對(duì)于容器(span標(biāo)簽)x軸=0;y軸=0的位置作為背景圖的起始位置來(lái)顯示圖片。所以如果需要在容器中顯示第二個(gè)圖標(biāo),意味著雪碧圖x軸方向要左移動(dòng),左移動(dòng)雪碧圖即它的值會(huì)設(shè)置為負(fù)數(shù),同理y軸方向也一樣。
制作
PS手動(dòng)拼圖
使用Sprite工具自動(dòng)生成(CssGaga或者CssSprite.exe)
以上就是“CSS怎么使用Sprite雪碧圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。