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

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

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

一、精靈圖使用場景：

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

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

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

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

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

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

控制一個層可顯示的區(qū)域范圍大小，
通過一個窗口進(jìn)行背景圖的滑動
實(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;
（第一個值是調(diào)左右的，當(dāng)你需要將背景圖向右調(diào)的時候用正值，向左則為負(fù)值同理將背景圖上下調(diào)動的時候上是用負(fù)值，下是正值）**
<2>效果圖如下：
（這是原圖）

（這是選完以后的圖）

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

剛?cè)肭岸藢懙牟缓靡娬彛。。?^o^)/~