懸停時切換圖像背景的最佳方法？

Question

我想知道哪種方式是最好的。

我有改變完全透明背景的半透明紅色背景上懸停一些半透明的錨圖片：
- >

僱主給我提供了紅色背景的版本爲每個圖像，但當然我不想使用它們，因爲這會帶來總帶寬浪費。相反，我想

選項1：


選項2：與1個萬能鏡像懸停切換背景圖像使用CSS3，但我不知道是否有可能

BTW。我已經閱讀了許多關於CSS精靈的好評，將網站上的整個圖像定位轉換爲精靈時尚是一個好主意？還是隻推薦用於某些圖像類型，比如錨？

Answer 1

當你在你的網站上有碎片圖像時，精靈是一個好方法，比如說像電子郵件，電話，服務等圖標，你擁有的圖像越多，它創建的請求就越多，從而使你的網站無效。此外，使用CSS Sprites時，按鈕不會在您將鼠標懸停時產生小故障，顯然只有第一次用戶可能會遇到小故障，但這會給您帶來一個糟糕的印象，您可以通過使用CSS Sprites你將不得不改變圖像的background-position。

來到按鈕，如果你想要的話，你可以簡單地使用CSS精靈，將按鈕狀態放在一個畫布上，然後使用background-image屬性使用它們，稍後在懸停時使用background-position屬性切換它們。

另一方面，如果你想要的效果是可能的，你也可以使用CSS3。通過查看圖像，我不認爲即使是CSS3也是必需的。如果這些不是真正的按鈕，並且真正的按鈕是特別的花式，那麼CSS Sprites將是一個好方法，因爲IE會破壞你的CSS3按鈕。

就透明度而言，您可以使用rgba()，其中a代表不透明度。您還可以使用CSS轉換來美化它們，以獲得更平滑的懸停效果。

如果您想快速瞭解CSS Sprite是什麼以及如何使用它們，您可以閱讀我的回答here。