什么是雪碧圖

湟源網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,湟源網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為湟源1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的湟源做網(wǎng)站的公司定做！

雪碧圖就是CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，就是把多張小圖標(biāo)合并到一張圖片上，然后用css的background-position來顯示需要顯示的部分。

為什么要用雪碧圖

可以減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)，提高頁面的加載速度，解決IE6鼠標(biāo)滑過時(shí)出現(xiàn)閃白的現(xiàn)象。

用雪碧圖有什么弊端

個(gè)人認(rèn)為如果你的雪碧圖不是很大，也不是很復(fù)雜基本沒什么弊端。如果你的雪碧圖很大又復(fù)雜的話就有出現(xiàn)css代碼復(fù)查，網(wǎng)頁占內(nèi)存大等各種問題。

實(shí)例

上面是一個(gè)按鈕第二個(gè)是它鼠標(biāo)經(jīng)過時(shí)的樣子

這是兩個(gè)小圖標(biāo)變合成的一個(gè)雪碧圖

<div class="user"><span></span>個(gè)人中心</div>
.user {
    width: 108px;
    height: 34px;
    border:1px #ddd solid;
    float: right;
    margin-top: 36px;
    line-height: 34px;
    border-radius: 3px;
    transition: all 0.3s;
    -moz-transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
}
.user span{
    display: inline-block;
    width: 20px;
    height: 22px;
    overflow:hidden;
    margin:5px 10px 5px 10px;
    float:left;
    background-image:url(../img/user.png);
    background-repeat: no-repeat;
    background-position: 0px -22px;    
    transition: all 0.3s;
    -moz-transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
}

.user:hover {
    border:1px #ff9600 solid;
    color:#f00;
}
.user:hover span{
    background-position: 0px 0px;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 491404389  ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

以上就是實(shí)現(xiàn)的代碼，請(qǐng)自行忽略這個(gè)過度效果（transition）。

可能剛開始有人還不會(huì)確定圖片位置。其實(shí)很簡單，你只要記住圖片是從左上角（0,0）開始的。

不知道這樣能否看的懂

文章名稱：web前端入門到實(shí)戰(zhàn)：css之background-position屬性實(shí)現(xiàn)雪碧圖
分享地址：http://jinyejixie.com/article28/peoscp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站改版、軟件開發(fā)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)