用图像替换按钮

Question

我已成功用图像替换了按钮.但似乎图像放在按钮的顶部.我不想把它放在我的CSS中,因为有其他样式重叠它,我不想有任何重定向页面.

<button type="reset"><img src="images/cancel.png" width="15"></button>

Answer 1

在CSS中执行此操作!

button {
  background-image: url(images/cancel.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 50px;
  width: 200px;
  border: none;
}

button span {
  display: none;
}

然后你的按钮是:

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

您也可以添加说明符来覆盖默认按钮行为 - 例如,-webkit-appearance: none;但我相信这足以满足您的需求.