使用CSS更改图像精灵点击按钮

时间:2012-10-04 05:50:00

标签: css button onclick sprite

更改按钮图像,然后单击

返回原始图像
<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> 

我正在使用一个精灵,当我点击它时它似乎不会去那个图像位置,有什么方法可以使用它吗?按下时,我不会对此字段产生按钮效果。

1 个答案:

答案 0 :(得分:3)

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

嗨现在用于background-position图片

中的 px值

就像这样

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

或者您也可以使用

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

px值根据您的设计