如何在Magento中實現CSS精靈？

Question

你好，我一直在尋找一些關於Magento CSS sprites的教程。發現了幾個像GTspeed，Webo的插件，但迄今爲止還沒有實現。

你能幫忙嗎？

Answer 1

敲CSS精靈

想象一下，你必須使用你的主網頁設計的六幅圖像，瀏覽器具有單獨下載。如果將它們合併爲一個圖像，則可以顯着降低頁面速度。這樣可以減少顯示頁面所需的往返次數，從而使您的網站更快。

而不是下載六個圖像，您的網頁現在只需要下載一個。 這是CSS精靈的美麗。一種資源，但有幾種用途。 大多數網頁在他們的設計中使用幾個小圖像。背景圖像，角落圖像，圖標，菜單項等。從頁面速度的角度來看，這些小圖像真的會加起來。

必須下載每一個圖像，這意味着網絡瀏覽器必須向服務器請求它，服務器必須發送它，然後瀏覽器必須顯示它。如果這只是發生在一個或兩個圖像上，那就沒有問題，但隨着越來越多的圖像被加載，頁面加速越慢。 這種情況下的解決方案稱爲圖像精靈，它將幾個小圖像組合成一個圖像，以便網頁顯示速度更快。 如何將圖片合併爲CSS精靈

創建CSS精靈時有兩個主要步驟。首先你必須製作圖像，然後你必須定位圖像。 合併圖像

我們將在這裏使用一個簡單的例子。假設我們有兩個圖像，我們希望在網頁上顯示風格，並希望將它們合併爲一個。我們必須知道圖像的大小才能創建精靈。我們將使用兩個圖像尺寸相同（50像素乘50像素）的示例。

要組合這些圖像，我們將創建一個100像素乘50像素的圖像。我們必須調用這個圖像，我們稱之爲「sprite.png」。現在我們有了一個組合圖像，我們可以使用我們所瞭解的圖像在我們的網頁上正確顯示它。

組合圖像的寬度爲50像素，高度爲100像素。因此，我們可以說第一個圖像（擴音器）位於新圖像的前50個像素中，而第二個圖像（笑臉）位於圖像的下50個像素中。我們可以使用這些知識將我們的圖像正確放置在我們的頁面上。實質上，當我們想要笑臉時，我們需要擴音器和圖像的下半部分來顯示圖像的上半部分。這是我們如何去這樣做......

定位頁面

上的圖像在這個例子中，我們將使用圖像作爲背景圖像中的div。這意味着我們將在我們的HTML中創建空的div標籤來顯示圖像。如果我們想讓擴音器圖像在我們的頁面上顯示，我們可以創建一個「擴音器」的CSS div類... .megaphone {width：50px;高度：50像素;背景：url（images/sprite.png）0 0px;}

上面的CSS代碼是說擴音器圖像的寬度和高度（50px乘50px），它也調用圖像「sprite。png「這是我們的組合圖像，最後是說」0 0px「部分，這是精靈的工作方式。通過告訴圖像以」0 0px「開始，它表示圖像應該從0像素X和0像素Y.不要讓這個嚇唬你，或者提出糟糕的代數作業噩夢，它實際上是說「在頂部開始圖像」和「在左側開始圖像」 由於我們定義了寬度和高度圖像在CSS中，圖像只會在圖像下方（擴音器所在的位置）顯示50個像素，並且會停止，因此根本不顯示笑臉。現在讓我們來做笑臉，看看它是如何改變我們的代碼的。創建一個名爲「smile」的CSS類... .smile {width：50px; height：50px; background：url（images/sprite.png）0 -50px;}

請注意，我們仍然聲明相同寬度a nd高度，我們仍然調用相同的圖像，但我們改變的是「0-50像素」部分。這是因爲我們現在正在將圖像告訴其他地方。具體而言，我們指出圖像應該開始向下50像素（-50像素）。這是因爲笑臉圖像直到組合圖像的下半部分纔開始，從頂部向下50像素。 現在CSS已經完成了，我們可以在我們希望圖像顯示的任何地方調用div中的div。當我們希望有一個擴音器，我們只是進入所謂的「傳聲筒」

一個空div當我們想要的，我們進入了一個名爲「微笑」

格即圖像組合成CSS的基礎知識的笑臉精靈，但有很多方法可以做到這一點，值得探索什麼是最適合你的網頁。上面的教程只是爲了展示精靈如何工作，決不是深入討論它們。