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

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> 

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

Answer 1

…………………………………………………………………………………………………………………………

嗨，现在习惯了图像中的px值background-position

像这样

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

或者你也可以使用它

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

px根据您的设计价值