使用html和css的精靈

我有一些使用精靈的代碼，它被設計成看起來像一個水平導航欄。我的問題是：對於我的代碼如下所示，這種方法實際上是否導致最終用戶下載png圖像8次或只是一次。使用html和css的精靈

如果它真的是一次，有沒有更好的方法來做到這一點？

CSS代碼

#facebook, #twitter, #linkedin, #googleplus { 
    width: 64px; 
    height: 64px; 
    display: inline-block; 
} 

#facebook { 
    background: url("images/sprite.png") 0 0; 
} 

#twitter { 
    background: url("images/sprite.png") -64px 0; 
} 

#linkedin { 
    background: url("images/sprite.png") -128px 0; 
} 

#googleplus { 
    background: url("images/sprite.png") -192px 0; 
} 

#facebook:hover { 
    background: url("images/sprite.png") 0 -64px; 
} 

#twitter:hover { 
    background: url("images/sprite.png") -64px -64px; 
} 

#linkedin:hover { 
    background: url("images/sprite.png") -128px -64px; 
} 

#googleplus:hover { 
    background: url("images/sprite.png") -192px -64px; 
}

HTML代碼：

<nav> 
    <a id="facebook" href="https://www.facebook.com"></a> 
    <a id="twitter" href="https://www.twitter.com"></a> 
    <a id="linkedin" href="https://www.linkedin.com"></a> 
    <a id="googleplus" href="https://plus.google.com"></a> 
</nav>

來源

2015-12-12 smally

請求將僅出現一次，圖像將被緩存。圖像將重新繪製，但不是通過請求服務器。它僅向服務器請求一次。但它始終是一個很好的做法，在主類的url()或單個實例：

#facebook, #twitter, #linkedin, #googleplus { 
    background: url("images/sprite.png"); 
}

而且最好是單獨使用background-position，而不是background，你也不必再用background: url()再次在:hover。

來源

2015-12-12 21:14:29

感謝這使得代碼看起來更整潔。現在我已經提出了你的建議改變，當你說圖像會重新繪製時，我只是好奇，這是否意味着整個精靈圖像被繪製或加載4/8次，或繪製一次，其他位顯示區域只是隱藏的視野。 – smally

@smally那麼，每個渲染過程都是重繪權利，我的意思是。最重要的是，瀏覽器**不會**從服務器請求新的圖像。採取這種方式，當圖像發生變化時，瀏覽器已經請求前三個url（），當第四個被解析時，不會顯示新圖像。 –

它只會被下載一次，這是使用CSS精靈表的主要原因，它只會下載一次，只有一個HTTP請求而不是8個HTTP請求，如果您爲每個圖標提供一個圖像正常和懸停狀態。

不，這是它是如何實現的，你正在做的正確。

資源：

編輯： 作爲Praveen Kumar提到你只寫url()一次所有相應的規則和background-position根據你的圖像水平或垂直移動圖像

來源

2015-12-12 21:14:49

請不要引用w3scools的內容。 –

我沒有從任何地方引用任何東西，我剛剛寫了幾年前我讀過的東西，我把w3schools作爲* second *鏈接，但沒有引用任何內容，另外我知道有些人是反w3schools，並且在某些情況下他們是對的，但這並不意味着來自w3schools的所有信息都是錯誤的！ –

好的。涼。不過，最好避免使用該網站。 –

使用html和css的精靈

回答

相關問題