背景位置问题

我的问题是为什么我无法继续在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

背景位置问题

回答

相关问题