CSS Sprites限制

CSS Sprite非常有用，有助於加快加載時間和性能。但我覺得他們有一定的侷限性。我想知道是否有辦法解決這個問題，或者它是否固有，而且它們是有限的。CSS Sprites限制

例如：如果我想在我的錨鏈接的箭頭圖標是在右手邊：

a 
    display:block; 
    padding:0 15px 0 0; 
    background:transparent ("/images/arrow.gif") no-repeat scroll right top; 
} 
a:hover { 
    background-position:-10px top; 
}

這實際上並不工作，因爲我定位的箭頭圖標是右手我的錨標籤的一面。但是，當我仍然希望它位於右側時，我將如何移動圖像-10px？

來源

2012-02-08 Steven Wu

可否請你澄清什麼是預期的行爲？如果精靈圖像的構建正確，則可以將圖像放置在精靈的位置，這一點沒有限制。也不要將像右上方這樣的單位與像素混合在一起，因爲IE可能有問題。 – 2012-02-08 11:22:51

預期的行爲是讓背景圖標始終坐在右側，但懸停時應該仍然在那裏。穆罕默德在這裏提供了一個解決問題的辦法 – 2012-02-08 12:16:36

您可以使用:after僞元素在鏈接文本之後創建一個附加元素，但仍然位於CSS標記的錨點標記內，將其設置爲等於您的精靈中每個圖片的大小，然後可以使用背景位置no問題。

這是一個使用4個圖像精靈來做這個事情的例子，每個圖像的大小都是18px * 18px（我剛剛在谷歌圖片上發現了這張圖片，所以甚至不知道它可以使用多長時間）：

要看到的例子真人版：http://jsfiddle.net/Meligy/CLLau/

代碼的重要位：

a:after { 
    content: " "; 
    display:inline-block; 
    width:18px; 
    height:18px; 
    overflow:hidden; 
    vertical-align:middle; 
    margin-left:0.5em; 
    background: url(http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif); 
    background-position: 0 0; 
} 

a:hover:after { 
    background-position: 18px 18px; 
}

更新：

這在目前所有的瀏覽器中都支持，在IE中，從IE8開始支持。

對於黑客用於IE 6，7，檢查此其他回覆＃1支持：
:after and :before css pseudo elements hack for IE 7

來源

2012-02-08 10:44:45 Meligy

這看起來像是一個完美的解決方案。感謝穆罕默德。需要進行測試以確保它在舊版瀏覽器中可用 – 2012-02-08 12:15:08

對於以前的瀏覽器，請檢查答案更新。 – Meligy 2012-02-08 12:33:02

回答

相關問題