背景位置問題

我的問題是爲什麼我無法繼續在gif上選擇位置：-60px。我一直在嘗試與任何幸運......任何建議？我想在jsFiddle上向你展示這些，但不知道如何將gif上傳到網站。背景位置問題

<div id="container"> 
    <div id="mainContent"> 
    <h1> Main Content</h1> 
     <div id="icon"> 

      <a href="#row_01" title="01A">01A</a> </div> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <!-- end #mainContent --></div> 
<!-- end #container --></div> 
</body> 
</html>

CSS

#icon a 
{ 
    background-image: url(../img/icon.gif); 
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
    display: block; 
    overflow: hidden; 
    text-indent: -99999px; 



    width: 30px; 
    height: 30px; 
} 

#icon a:hover, #icon a:focus 
{ 
    background-position: -30px 0; 
} 

#icon a.selected, #icon a.selected:hover 

{ 
    background-position: -60px 0; 
}

來源

2011-06-29 YoniGeek

什麼是寬度和GIF的高度？順便說一句，你可以使用**數據URI **協議來編碼的gif，然後輕鬆地把它放在jsfiddle :) – Karolis

@ karolis我認爲dat謝謝！ – YoniGeek

是沒有問題的，只要圖像實際上是至少90寬。

這裏是你的代碼的佔位符圖像，並且代碼將切換selected類，當你點擊圖片：

http://jsfiddle.net/wwRed/

來源

2011-06-29 11:55:15 Guffa

@Guffa！但與此jQuery代碼將無法正常工作？我的意思是隻使用CSS代碼？ – YoniGeek

@YoniGeek：你什麼意思？你已經指定了anchor元素應該有第三個被激活狀態的「selected」類，所以你需要一些方法來設置這個類。 – Guffa

@Guffa當然對不起！如果我不使用任何課程......如果沒有js，有可能嗎？ – YoniGeek

背景位置問題

回答

相關問題