CSS Sprite初探之原理 使用

2021-09-20 14:35:08 字數 4249 閱讀 9839

css sprite簡介:

利用css sprites能很好地減少了網頁的http請求次數,從而大大的提高了頁面的效能,節省時間和頻寬。

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

加速的關鍵,不是降低重量,而是減少個數。傳統切圖講究精細,規格越小越好,重量越小越好,其實規格大小無所謂,計算機統一都按byte計算。客戶端每顯示一張都會向伺服器傳送請求。所以,越多請求次數越多,造成延遲的可能性也就越大。

css sprites原理:

css sprites其實就是把網頁中一些背景整合到一張檔案中,再利用css的「background-image」,「background- repeat」,「background-position」的組合進行背景定位,background-position可以用數字能精確的定位出背景的位置。

css sprites優點:

利用css sprites能很好地減少了網頁的http請求,從而大大的提高了頁面的效能,這也是css sprites最大的優點,也是其被廣泛傳播和應用的主要原因;

css sprites能減少的位元組,曾經比較過多次3張合併成1張的位元組總是小於這3張的位元組總和。

解決了網頁設計師在命名上的困擾,只需對一張集合的上命名就可以了,不需要對每乙個小元素進行命名,從而提高了網頁的製作效率。

更換風格方便,只需要在一張或少張上修改的顏色或樣式,整個網頁的風格就可以改變。維護起來更加方便。

css sprites缺點:

誠然css sprites是如此的強大,但是也存在一些不可忽視的缺點

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

css sprites

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

css sprites非常值得學習和應用,特別是頁面有一堆ico(圖示)。總之很多時候大家要權衡一下利弊,再決定是不是應用css sprites

css sprites切割術

1. css sprites順序合由上至下、左至右新增。而background-position一般採用數字組合形式定位,這樣能減少維護帶來的不必要麻煩。

2. 不建議css sprites中保持一定的間距,因為檔案size增大而增加檔案體積。

3. css sprites中把顏色較近或相同的組合在一起可以降低顏色數,因為少色數的檔案體積會相對的小。

4. size相同的css sprites中留有較大空隙,某程度上多數情況會增大了體積,所以css sprites的不要有空隙。

5. 在size相同的css sprites中,垂直排列的會比水平排列的檔案體積要大。

6. 在css sprites中,水平排列的會比垂直排列的檔案體積要大。

9. **切割位:在css sprites的最右或左邊為最靈活動位置最適宜擺放文字前的icon,因此不會受到其它css sprites干預,也不需要預留一定的行寬。

10. 有的說定位時避免使用bottom或right等,當使用css sprite的時候,只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的,但是問題是,當你在寬度上或高度上擴充套件相關sprite的時候,原先設定的位置可能是錯的,因為那個已經不再sprite的底部或右部了。使用確切的位置來避免這個問題。

其實我感覺一般情況寬度圖不片不會改應變,用right和 left還是挺方便的,但從整體考慮,公升級了。改版的。寬度還是有可能會改變的。必竟開始時做太寬也沒什麼好處,還是浪費很多空間。就是多費點時間去對座標,最好還是不用right 和 leift的了。

11. 有的說竟給每個足夠的空間

就像你在本文頂部的例項看到的那樣,那些小都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite更小呢? 因為使用這些的元素通常都會有大量的內容而且可能會需要擴充套件的間距,以至於其它不會意外出現。

使用css sprite 的好處?

css sprites(整合技術) 的目的就是通過整合,減少對伺服器的請求數量,從而加快頁面載入速度。

如下圖所示:

如何來製作?

基本的原理,就是利用background-postion的負值來進行調節。

當我們定位於background-position:-50px -50px;時發現向左上,移動了,也就以div的左上角為中心,圖向左移動了50px,向上也移動了50px.

背景的定位取圖問題

我們知道在用作為背景的時候,css要這樣寫,以div容器舉例子,也可以是body、td、p等的背景,道理一樣。**:

div

這裡的background的屬性值依次為:

no-repeat 是否重複:(小於容器的大小時,缺省會重複排列以填滿容器,no-repeat表示不重複,只有這個時候後面的定位座標才有用。)

fixed 背景是否隨容器滾動:(有兩個可選值,scroll滾動,fixed不滾動,預設是scroll)

x y 背景影象的定位:(注意,只有在no-repeat下定位才有意義。這個就是今天要講的重點)

背景影象定位中我們要明確的幾點:

1、兩個值前面乙個是橫向的定位,我們稱為x軸方向定位。後面乙個值是縱向的定位,我們稱為y軸方向定位。如果只有乙個值,那預設的就是x軸方向,這時y軸方向就預設的是上下居中對齊,也就是center。

2、座標軸的原點就是對應容器的左頂點。

3、這個座標的y軸箭頭朝下,也就是右下方(容器內部)x y的值才都為正。

4、x y值分別表示背景的左頂點相對於座標原點(也就是容器的左頂點)的值。

5、x y的值可以用百分比或者px來表示。

6、x y也可以用「left、right、top、bottom、center」這五個對齊方式來表示,但注意:用「left、right、top、bottom、center」來表示的時候,

應用的是對齊規則,而不是座標規則。x為left是表示的左邊和容器的左邊對齊,為right的時候表示的右邊和容器的右邊對其,y為top的時候表示的頂部和容器的頂部對齊,為bottom時表示的底部和容器的底部對齊,x y等於center的時候表示居中對齊。

7、x y用百分比或者px表示的時候,其值可以為負數。我們應用座標規則就很容易理解負數表示的意義,x為負數時候表示左頂點在容器左頂點的左側,y為負數時表示的左頂點在容器的左定點的上方。也就是向左和向上超出容器的範圍。

補充一點,如果定位用的是百分比話,演算法比較特殊

。我舉個例子:

**:background:#fff url(image) no-repeat fixed 50% -30%;

左頂點距容器左頂點的座標位置為 

得到的結果應用座標法則,差值如果為負數,百分比為正那麼運算結果是負值。如果差值為負數,百分比也為負數,那麼運算結果就是正數。總而言之就是這裡的運算符合運算法則。把運算的結果帶入座標法則就能得到的位置。 

比如:容器是width:600px;height:600px;而是width:200px;height:200px; 

x:(600px-200px)*50% 

y:(600px-200px)*(-30%)

css sprite原理優缺點及使用

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

C 之CLR記憶體原理初探

本文初步講述了c 的clr記憶體原理。這裡所關注的記憶體裡面說沒有暫存器的,所以我們關注的只有託管堆 h程式設計客棧eap 棧 stack 字串常量池 其中string是乙個很特殊的物件 首先我們看兩個方法 void m1 void m2 string name2 這裡我們有乙個m1的方法,初始化乙...

編譯原理初探

編譯的第乙個過程是詞法分析,目的就是在連續的字元中識別出乙個乙個的符號,並盡可能的識別出符號的屬性,再詞法分析階段,能夠識別出一些符號的意義,它們包括關鍵字,數字字串,分隔符等,它們不需要其他符號的輔助就能確定本身的意義,如int代表整型 但是有一些符號需要通過前後的其它符號才能確定,更多的資訊需要...