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

zhigoo 發布于2019-04-23 13:31 / 3267人閱讀

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

一、精靈圖使用場景：

二、Css Sprite（優點）

減少圖片的字節。
減少網頁的http請求，從而大大的提高頁面的性能。
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

三、實現原理

css background-position

控制一個層可顯示的區域范圍大小，
通過一個窗口進行背景圖的滑動
實例：

代碼如下：



    
        "utf-8"/>
        <span id="dpzfd59"    class="hljs-built_in">background-<span id="lpnnbpb"    class="hljs-built_in">position<
        "stylesheet" href="index.css"/>
    
    
        class="oo span1">
        class="oo span2">
        class="oo span3">
        class="pp span4">
        class="ll span5"> 
        class="hh span6"> 
        
    

.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;
（第一個值是調左右的，當你需要將背景圖向右調的時候用正值，向左則為負值同理將背景圖上下調動的時候上是用負值，下是正值）**
<2>效果圖如下：
（這是原圖）

（這是選完以后的圖）

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

剛入前端寫的不好見諒！！！(^o^)/~

云服務器 GPU云服務器雪碧圖 html使用雪碧圖 html 精靈圖 html精靈圖引入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1992.html

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

摘要：一精靈圖使用場景二優點減少圖片的字節。減少網頁的請求，從而大大的提高頁面的性能。解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。一、精靈圖使用場景： showImg(https://segmentfault.com/img/bVbd4Ex?w=927&h=389); 二、Css Sprite（優點）減...

Youngs 2019-08-02 10:59 評論0 收藏0
Css Sprite(雪碧圖、精靈圖)<圖像拼合技術>

摘要：一精靈圖使用場景二優點減少圖片的字節。減少網頁的請求，從而大大的提高頁面的性能。解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。一、精靈圖使用場景： showImg(https://segmentfault.com/img/bVbd4Ex?w=927&h=389); 二、Css Sprite（優點）減...

n7then 2019-08-30 15:54 評論0 收藏0
CSS Sprite雪碧圖的應用

摘要：雪碧圖的使用場景靜態圖片，不隨用戶信息的變化而變化。使用使用雪碧圖之前，我們需要知道雪碧圖中各個圖標的位置。以上面的雪碧圖為例實際雪碧圖中各個小圖片的起始位置和上面的展示圖不同用一個來闡述它的使用方法。 CSS雪碧圖，即CSS Sprite，也有人叫它CSS精靈圖，是一種圖像拼合技術。該方法是將多個小圖標和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。 s...

verano 2019-08-02 11:51 評論0 收藏0
CSS Sprite雪碧圖的應用

摘要：雪碧圖的使用場景靜態圖片，不隨用戶信息的變化而變化。使用使用雪碧圖之前，我們需要知道雪碧圖中各個圖標的位置。以上面的雪碧圖為例實際雪碧圖中各個小圖片的起始位置和上面的展示圖不同用一個來闡述它的使用方法。 CSS雪碧圖，即CSS Sprite，也有人叫它CSS精靈圖，是一種圖像拼合技術。該方法是將多個小圖標和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。 s...

Galence 2019-08-29 17:07 評論0 收藏0
使用compass自動合并css雪碧圖(css sprite)

摘要：使用雪碧圖，能夠減少頁面的請求數降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。也正是因為這一點，導致很多開發者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，能夠減少頁面的請求數、降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。但...

劉永祥 2019-08-28 18:06 評論0 收藏0