為什麼用css sprites

2021-06-18 13:42:22 字數 1383 閱讀 3803

在分析各個**的css時,我們經常可以看到一些**有很多的元素共享了一張背景,而這張背景包含了所有這些元素需要的背景,這種技術就叫做css sprites。

例如**的css sprites

url是

這樣做有什麼好處呢?

顯而易見,瀏覽器在載入每一張的時候都會發起乙個http請求。

如果使用css sprites技術,將所有的合成一張,那麼,這樣多個http請求會被合成乙個http請求。

這樣就既能大大降低後台伺服器的開銷,又能加快網頁載入速度。

css sprites原理:

我們以**的為例,在html裡面插入乙個div,寬高為200px*100px,

a.將的偏移設定為

影象顯示效果如下:

b.將的偏移設定為

影象的顯示效果如下:

這樣,乙個簡單的css sprites就實現了。

css sprites優點

css sprites為什麼突然跑火,跟能夠提公升**效能有關。顯而易見,這是它的巨大優點之一。

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

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

css sprites缺點

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

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

2.css sprites在開發的時候比較麻煩,你要通過photoshop或其他工具測量計算每乙個背景單元的精確位置,這是針線活,沒什麼難度,但是很繁瑣;不過網上已經有高手開發出「css sprites 樣式生成工具」,大家可以嘗試一下。

3.css sprites在維護的時候比較麻煩,sprites是一般雙刃劍,如果頁面背景有少許改動,一般就要改這張合併的,無需改的地方最好不要動,這樣避免改動更多的css,如果在原來的地方放不下,有只能(最好)往下加,這樣的位元組就增加了,因為每次的改動都得往這個刪除或新增內容,顯得稍微繁瑣,而且重新算的位置(尤其是這種上千px的圖)也是一件頗為不爽的事情。當然,在效能的口號下,這些都是可以克服的。

4.由於的位置需要固定為某個絕對數值,這就失去了諸如center之類的靈活性。

python為什麼用flask 為什麼用flask

flask是python在web開發領域乙個輕量級的框架,為什麼選擇flask呢?此文可能會給你答案。選擇flask的原因 1.微框架 簡潔 只做它需要做的,給開發展提供了很大的擴充套件性。2.flask和相關的依賴 jinja2 werkzeug 設計得非常優秀,用著簡單。3.開發效率非常高,比如...

為什麼用指標

相信接觸過程式設計的,大部分應該對c語言有一定了解或者學過一門c語言課程。或多或少聽到這種說法 c語言很難學,特別是指標。我大一下學期開的這門課,學完之後感覺還好 其實是我沒有深入學,典型的自我感覺良好 但指標那塊確實也沒太弄明白。現在好像明白了一點什麼是指標,在什麼情況下用比較好。int a 1 ...

為什麼用conda?

1.什麼是conda?常講conda和pip比較,conda可以在conda環境下安裝任何語言的包,pip可以在任何環境下安裝python包。所以用conda管理安裝python包是綽綽有餘的。那為何要用conda而不用pip呢?原因是conda可以很好解決如numpy和scipy的包之間的依賴關係...