html - 用图像替换按钮

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; 但我相信这足以满足您的需求。