sprite(css中sprite的使用方法)

css sprite的使用方法:首先把網頁中一些背景圖片整合到一張圖片文件中;然后通過CSS的“background-image”、“background- repeat”及“background-position”的組合進行背景定位即可。

CSS Sprites在國內很多人叫css精靈,是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言,不高于200KB的單張圖片的所需載入時間基本是差不多的,所以無需顧忌這個問題。

CSS Sprites技術加速的關鍵,不是降低重量,而是減少個數。傳統切圖講究精細,圖片規格越小越好,重量越小越好,其實規格大小無所謂,計算機統一都按byte計算?？蛻舳嗣匡@示一張圖片都會向服務器發送請求。所以,圖片越多請求次數越多,造成延遲的可能性也就越大。

css sprite使用

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字精確的定位出背景圖片的位置。

示例:

HTML

<p class="box">    <span class="icon1"></span>    <span class="icon2"></span>    <span class="icon3"></span>    <span class="icon4"></span></p>

CSS

<style>       .box {         width: 600px;         height:300px;         border: 3px solid #ccc;         background-color: #8064A2;        }        span {         display: inline-block;         width: 25px;         height: 25px;         border: 3px solid #ccc;         background-image: url(css/img/sidebar.png);         background-repeat: no-repeat;         margin: 5px;        }       .icon1 {         background-position: 0 0;        }       .icon2 {         background-position: -40px 0;        }       .icon3 {         background-position: 0 -25px;        }       .icon4 {         background-position: -40px -25px;        }</style>

效果圖:

CSS Sprites 的優點:

1、減少圖片的字節

2、減少了網頁的http請求,從而大大的提高了頁面的性能

3、減少命名難的問題。

4、維護起來更加方便。

CSS Sprites 的缺點:

1、在圖片合并的時候,你要把多張圖片有序的合理的合并成一張圖片,還要留好足夠的空間,防止板塊內出現不必要的背景;這些還好,最痛苦的是在寬屏,高分辨率的屏幕下的自適應頁面,你的圖片如果不夠寬,很容易出現背景斷裂;

2、CSS Sprites在維護的時候比較麻煩,如果頁面背景有少許改動,一般就要改這張合并的圖片,無需改的地方最好不要動,這樣避免改動更多的css,如果在原來的地方放不下,又只能(最好)往下加圖片,這樣圖片的字節就增加了,還要改動css。

看完了這篇文章,相信你對css中sprite的使用方法有了一定的了解,想了解更多相關知識,歡迎關注本站行業資訊頻道,感謝各位的閱讀!