Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>

Youngs 發(fā)布于2019-08-02 10:59 / 774人閱讀

摘要：一精靈圖使用場(chǎng)景二優(yōu)點(diǎn)減少圖片的字節(jié)。減少網(wǎng)頁(yè)的請(qǐng)求，從而大大的提高頁(yè)面的性能。解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。

一、精靈圖使用場(chǎng)景：

二、Css Sprite（優(yōu)點(diǎn)）

減少圖片的字節(jié)。

減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能。

解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。

更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。

三、實(shí)現(xiàn)原理 css background-position

控制一個(gè)層可顯示的區(qū)域范圍大小，
通過(guò)一個(gè)窗口進(jìn)行背景圖的滑動(dòng)
實(shí)例：

代碼如下：



    
        
        background-position<
        
    
    
        
        
        
        
         
         
        
    

.body{
    margin:0 auto;
    text-align:center;
}
.oo{
    display:block;
    width:43px;
    height:44px;
    background:url(images/img_navsprites_hover.gif) no-repeat;
    margin:20px auto;
}
.span1{
    background-position:0 0;
    position:absolute;
    top:0px;
}
.span2{
    background-position:-47px 0;
    position:absolute;
    top:0px;
    left:60px;
}
.span3{
    background-position:-94px 0;
    position:absolute;
    top:0px;
    left:120px;
}
.span1:hover{
    background-position:0 -45px;
}
.span2:hover{
    background-position:-47px -45px;
}
.span3:hover{
    background-position:-94px -45px;
}
.pp{
    display:block;
    width:38px;
    height:38px;
    background:url(images/pwd-icons-new.png) no-repeat;
    margin:20px auto;
}
.span4{
    background-position:-48px -96px;
}
.ll{
    display:block;
    width:24px;
    height:26px;
    background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
    margin:20px auto;
}
.span5{
    background-position:0 -483px;
}
.hh{
    display:block;
    width:18px;
    height:18px;
    background:url(images/toolbars.png) no-repeat;
    margin:20px auto;
}
.span6{
    background-position:-95px -211px;
}

**background-position:npx npx;
（第一個(gè)值是調(diào)左右的，當(dāng)你需要將背景圖向右調(diào)的時(shí)候用正值，向左則為負(fù)值同理將背景圖上下調(diào)動(dòng)的時(shí)候上是用負(fù)值，下是正值）**
<2>效果圖如下：
（這是原圖）

（這是選完以后的圖）

第一幅圖是原圖與暗圖的轉(zhuǎn)換；選了第二幅圖的鎖；第四幅圖的火車；第五幅圖的小人。

剛?cè)肭岸藢懙牟缓靡?jiàn)諒！！！(^o^)/~