將我的導航欄轉換爲css精靈

目前我網站的導航欄由包裹在'a'標籤中的'img'標籤組成。每個img都有一個javascript函數來顯示翻轉img。因此，所有瀏覽器都必須加載18個圖像，這是18個http請求，顯然效率很低。將我的導航欄轉換爲css精靈

我想用css背景圖像和hover僞類使用1個spr圖像。

問題是，如果我只用'a'與背景圖像，我不能設置高度和寬度。如果我將它設置爲「a」來顯示：塊，則會破壞頁面的流向。有沒有辦法使用css {background-image}，同時保持一切內聯？

如果不是，我該怎麼辦？

這裏是網站：www.thetempers.net

來源

2011-01-24 Black Magic Tropical

一般來說，如果你想設置的寬度/高度，如你預期，你需要將顯示器設置爲阻止。

雖然，通常會將一個垂直放置在另一個之後，可能不是您想要的。

所以嘗試使用float：留給他們，然後玩邊距來獲得正確的間距。

從側面說明，除非您有極端的負載，否則您可能不會看到精靈的性能優勢。很多時候，這不值得頭痛。

來源

2011-01-24 03:34:39

好的，我會給你一個鏡頭。是不是所有圖像同時加載的主要優點？ – 2011-01-24 03:40:56

您可以申請display: inline-block這將使您的a行爲像img。

此外，對於您的具體情況，您看起來不需要懸停狀態的額外圖像。你可以應用不透明度...

#nav-bar a { 
    display: inline-block; 
    background: [...]; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; 
    filter: alpha(opacity=80); 
    opacity: 0.8; 
} 

#nav-bar a:hover { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
}

你可以妥協9請求，或減少文件大小，如果你使用這種技術的精靈。

來源

2012-06-23 21:48:58 Duopixel

您也可以使用display: inline-block; insigned display: block; float: left;，但它不適用於較舊的瀏覽器，例如IE < 8.0。您可以檢查here以獲取瀏覽器支持。

Sprites最小化對服務器的請求數量。這樣服務器使用較少的CPU週期並且傳輸的數據稍微小一些。儘管用戶最大的優勢在於他們可以更快地獲得您的網站。它的工作方式是，大多數瀏覽器在默認情況下只對同一臺服務器執行少量請求。因此，瀏覽器請求前幾個文件，並且只有當其中一個文件完成下載時才請求下一個文件。 18個文件相當多。

來源

2012-06-23 21:52:22 szym

如果原始元素是內聯的，則「嵌入塊」適用於IE 6+，這是OP（樣式「a」）的情況。 – Duopixel 2012-06-23 21:58:27

將我的導航欄轉換爲css精靈

回答

相關問題