css - 使用 CSS 在单击按钮时更改图像 Sprite

Question

在点击时更改按钮图片然后点击后返回原始图片

<style>
img.button-send {
background: url(img/agentsprite.png) 0 0;
width:87px;
height:34px;
opacity:0;
}
img.button-send:active {
background: url(img/agentsprite.png) 34 174;
width:87px;
height:34px;
}

</style>
      <button type="submit">
      <img class="button-send" src="img/img_trans.gif" width="1" height="1" />
          </button> 

我为此使用了一个 sprite，当我点击它时它似乎不会到达那个图像位置，有什么办法可以让它工作吗？我不想在按下时对该字段产生按钮效果。

Answer 1

........................

您现在习惯于在您的background-position 图像中使用px 值

像这样

img.button-send:active {
background: url(img/agentsprite.png) 34px 174px;
}

或者你也可以用这个

img.button-send:active {
    background-position:34px 174px;
    }

px 值根据您的设计