csssprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需顧忌這個問題。 加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。
客戶端每顯示一張都會向伺服器傳送請求。所以，越多請求次數越多，造成延遲的可能性也就越大。csssprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的「background-image」，「background-repeat」，「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景的位置。利用css sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的效能，這也是css sprites最大的優點，也是其被廣泛傳播和應用的主要原因； css sprites能減少的位元組，曾經比較過多次3張合併成1張的位元組總是小於這3張的位元組總和。 解決了網頁設計師在命名上的困擾，只需對一張集合的上命名就可以了，不需要對每乙個小元素進行命名，從而提高了網頁的製作效率。 更換風格方便，只需要在一張或少張上修改的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
貼個小例子
[html]view plain
copy
>
<
html
>
<
head
>
<
title
>
new document
title
>
<
meta
name
="generator"
content
="editplus"
>
<
meta
name
="author"
content=""
>
<
meta
name
="keywords"
content=""
>
<
meta
name
="description"
content=""
>
<
style
>
div#tools h5
div#tools h5#tools_reference, div#tools h5#tools_quiz
div#tools h5#tools_reference a, div#tools h5#tools_quiz a
div#tools h5#tools_reference a
div#tools h5#tools_reference a:hover
div#tools h5#tools_quiz a
div#tools h5#tools_quiz a:hover
style
>
head
>
<
body
>
<
divid
="tools"
>
<
h5id
="tools_reference"
>
<
ahref=""
>
php 參考手冊
a>
h5>
<
h5id
="tools_quiz"
>
<
ahref=""
>
php 測驗
a>
h5>
div>
body
>
html
>
以上在ie6中支援不是很好。
gwt, ext中就有頻繁使用這個。
css sprite 介紹和例項
csssprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需顧忌這個問題...
css sprite 介紹和例項
csssprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需顧忌這個問題...
CSS Sprite介紹和基本說明
這篇文章已經改名字了，今天我將說名css sprite的基本應用 css sprite是css的基本技術之一，剛遇到的時候沒什麼感覺，但現在才發現其強大之處 參考下面有常用標籤 panel1b a hover background 背景圖 0 200px 背景圖相對位子 no repeat 背景不重...