如何使按钮标签仅在其中显示图像答案

【问题标题】：How to Make Button Tag Only Show Image Inside of it如何使按钮标签仅在其中显示图像
【发布时间】：2014-04-11 01:42:19
【问题描述】：

我的网站上有以下提交按钮的代码：

<button name="searchterm" type="submit" id="searchterm"><img src="images/ICON_Go.jpg"></button>

以及以下 CSS：

#searchterm {
    margin:0px;
    padding:0px;
    white-space:nowrap;
    width:auto;
    overflow:visible;
}

Demo

这就是它在实时网站上的显示方式：

我希望它是绿色的go 图像。我不希望图像周围的按钮图形。我怎样才能做到这一点？

感谢您的帮助。感谢所有帮助。

【问题讨论】：

是否有任何理由使用src 属性调用图像？而不是将图像称为背景？
是的，我个人的喜好。

标签： html css image button submit-button

【解决方案1】：

添加此项以移除背景颜色和边框：

#searchterm {
    border:0;
    background:transparent.
}

Working Fiddle

【讨论】：

很高兴为您提供帮助！如果它解决了它，你能把它标记为帮助人们展望未来的答案吗？

【解决方案2】：

您需要重置按钮的默认样式：button{ border:0; padding:0; outline:0; background:transparent;} 并添加到您的图像：{display:block; }

【讨论】：

【解决方案3】：

也许这会满足你的需要？

<button name="searchterm" type="submit" id="searchterm"></button> 

    button {
    appearance:none;
    -webkit-appearance:none;
    background-color:transparent;
    border:none;
    outline:none;
    background-image:url('http://i.stack.imgur.com/gojXZ.jpg');
    background-size:40px 34px;
    background-position: 18px 5px;
    padding:22px 38px;
    background-repeat:no-repeat;
    cursor:pointer;
}

DEMO

【讨论】：

【解决方案4】：

我认为这将是使用background-image CSS 属性调用图像的更好方法。

#searchterm {
  margin:0px;
  padding:0px;
  width:50px;
  height:50px;
  background:url("http://lorempixel.com/50/50") 0 0 no-repeat;
}

/--证明这是实际按钮的小警报代码-/

function myFunction()
{
alert("Hello! I am an alert box!");
}

/-HTML代码---/

<button name="searchterm"  type="submit" id="searchterm"  onclick="myFunction()"></button>

这样，这将作为实际按钮工作。检查演示。 http://jsbin.com/malorefa/1/

【讨论】：