2009-07-25 43 views

回答

10

您的網站的可維護性會因使用它們而受到影響。僅合併屬於同一邏輯單元的圖像,且不可能單獨更新。保留可能單獨更改的圖像以開始。

1

我們有一個艱難的時候,我們希望將圖像進行動態定位。

background-image: url(../images/a.gif); 
background-repeat: no-repeat; 
background-position: left bottom; 

這很棘手(如果不是不可能)使用精靈。

3

CSS sprites對於<input type="text">不適用,用戶可以輸入多個符合框的內容,因爲背景會在某些版本的IE中滾動。

如果你想重複這個模式,它們也不好。

25

像所有的事情,有些時候它是有用的,有些時候它是有害的。

許多開發人員喜歡使用CSS精靈,因爲它節省了請求時間 - 瀏覽器發出一個請求,下載圖像,和所有的各種精靈現在會自動緩存,速度極快。

那麼它怎麼會受傷?

因爲下載大小!=內存大小。

這PNG或GIF圖片,只有10KB實際上可能會很多,規模更大,一旦瀏覽器加載到內存中。問題是,儘管像GIF這樣的東西會壓縮固定的顏色區域,但瀏覽器會將其展開爲位圖,其中所有尺寸相同的圖像都使用相同的內存。

並且它每載入一個新的位圖您在某處使用該圖像時。

所以一切都適中。

見:http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/獲取更多信息。

+3

「並且每當您在某處使用該圖像時,它都會加載一個新的位圖。」任何來源? – kahoon 2013-06-12 13:29:17

1

如果用戶想要下載特定圖像,可能會導致用戶頭痛。首先他們不會得到「保存圖像爲」選項。如果他們想要使用「查看背景圖片」,他們會得到一張巨大的圖片,其中還有很多其他圖片。

這就是爲什麼精靈最好被保存爲「工具」(即按鈕)或設計圖像的原因。

-3

使用較大的圖片可能會讓人頭疼... 當圖片以較小的尺寸組合在一起時,相鄰圖片之間只有1或2個像素,那麼CSS精靈可能是一個很好的解決方案。 在我們的例子中,http://www.nbhuntop.com,我們只是用它作爲菜單組件,包括:Home,About,Products。所有的圖片都採用gif格式,沒有人會下載這些圖片。

+4

「沒人會下載這些照片」?你似乎並不瞭解Web的工作原理。 – 2012-06-04 04:55:58

-1

當圖像大小差異很大時,永遠不要使用精靈。
因爲在這種情況下,精靈的大小是相當巨大的。
最近我將3.5MB圖片轉換爲精靈,並且尺寸最高可達17MB!