Question

我的问题是为什么我不能进一步了解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;
}

Answer 1

没有问题，只要图像实际上至少为90宽。

以下是包含占位符图片的代码，以及在您点击图片时切换selected类的代码：

http://jsfiddle.net/wwRed/

背景位置问题

1 个答案: