CSS精靈 - 多次調用

對於在css中需要的每個實例調用精靈圖像是否錯誤？瀏覽器如何處理這個問題，它是否只被加載一次？CSS精靈 - 多次調用

例子：

.box1{ background: url('../img/sprite.png') 0 0 no-repeat; } 
.box2{ background: url('../img/sprite.png') 0 -20px no-repeat; } 
.btn{ background: url('../img/sprite.png') -100px -60px no-repeat; }

我已經看到了一些例子，你曾經叫精靈，只是改變了背景的位置。

例子：

#myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; } 
#myDiv .box2{ background-position: 0 -20px; }

來源

2013-05-01 Staysee

時只加載一次？是。 – Ejaz 2013-05-01 20:29:15

唯一錯的技術是你的CSS將有冗餘代碼，這使得它更大的（以字節爲單位），比它需要。

它不會多次加載背景圖片。您可以通過打開您的開發人員工具並查看網絡選項卡來確認這一點。

來源

2013-05-01 20:30:13

爲了澄清，這種技術不會使CSS成爲冗餘IMO。爲一個規則中的所有元素（使用逗號分隔的選擇器）指定背景圖像，然後只更改'background-position'使其更加簡潔。如果使用一種技術生成冗餘CSS，那麼他會生成冗餘的CSS;） – Ejaz 2013-05-01 20:35:46

我認爲有冗餘的選擇器是可以接受的，但是樣式本身應該定義一次以避免錯誤並簡化維護。這仍然是多餘的是有爭議的。 – 2013-05-01 20:37:20

背景圖片將只下載一次。

爲了測試這一點，你可以檢查通過執行以下哪些資源在Chrome下載：

瀏覽到的網頁
右鍵單擊頁面上
點擊審查元素
點擊網絡選項卡
上刷新頁面

所有加載的資源都將顯示在此列表中。

此外，您還可以幹你的CSS是這樣的：

.box1, .box2, .btn{ background-image: url('../img/sprite.png') } 
.box1{ background-position: 0 0 no-repeat; } 
.box2{ background-position: 0 -20px no-repeat; } 
.btn{ background-position: -100px -60px no-repeat; }

來源

2013-05-01 20:38:56

很高興知道，謝謝！ – Staysee 2013-05-01 20:50:34

CSS精靈 - 多次調用

回答

相關問題