Css sprite錯誤的位置

我最近遇到了一些CSS Sprites的問題。我希望他們切換圖片每個函數調用，函數本身是可以的，因爲它只會刪除並添加css類。Css sprite錯誤的位置

我有以下的CSS：

#slider_arrow { 
    padding-left: 200px; 
    position: relative; 
    top: -1px; 
} 

.red_arrow_sprite { 
    background: url(/Images/onex/arrows.png) 0 0 no-repeat; 
    width: 25px; 
    height: 12px; 
} 

.yellow_arrow_sprite { 
    width: 25px; 
    height: 12px; 
    background: url(/Images/onex/arrows.png) -26px 0 no-repeat; 
} 

.black_arrow_sprite { 
    width: 25px; 
    height: 12px; 
    background: url(/Images/onex/arrows.png) -51px 0 no-repeat; 
}

Slider_arrow是：

<span id="slider_arrow" class="red_arrow_sprite"></span>

中，我改變類的元素。

問題是我的Sprite文件有75px寬度和25px高度。使用CSS I呈現我得到的結果是，當我用red_arrow_sprite類看到所有3張圖片，用yellow_arrow_class看到2張圖片和用black_arrow_class得到的1張圖片。

我做了什麼CSS錯誤？在此先感謝。

http://jsfiddle.net/9b57pb50/

來源

2014-12-23 Sheil

您的img和javascript在jsfiddle中缺少 – Asenar

您無需在每個類中定義寬度和高度http://jsfiddle.net/9b57pb50/4/ – Danield

看看這個solution

我已經刪除padding，並添加一些display性質。

來源

2014-12-23 09:15:42

謝謝！這正是我想要的:) – Sheil

確定:)我已經使用了示例圖片，但它應該適用於您的。 –

Css sprite錯誤的位置

回答

相關問題