不使用 type="image" 的带有图像的按钮答案

【问题标题】：Button with an image without using type="image"不使用 type="image" 的带有图像的按钮
【发布时间】：2012-02-01 23:00:49
【问题描述】：

我想添加一个按钮，该按钮看起来像我将分配的图像，但其类型不是“图像”。例如：

<input type="button" someimagetag="someimagelink" />

不喜欢

<input type="image" src="" />

我该怎么做？

【问题讨论】：

为什么不直接使用button 元素：<button><img src="path/to/image.png" /></button>？
好吧，我试过你说的，但它看起来与我的形象不符。另外，我正在尝试在单击按钮时运行 js 方法，并且在单击按钮时，它应该在后台运行。相反，它通过加载操作页面来发布数据。

标签： html image button

【解决方案1】：

您可以像使用任何其他元素一样设置样式，使用 CSS。

查看 Twitter 的 Bootstrap http://twitter.github.com/bootstrap/ 任何使用 'btn' 类的元素都会使用这些样式：

.btn {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-transition: all 0.1s linear 0s;
    background-color: #E6E6E6;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
    background-repeat: no-repeat;
    border-color: #CCCCCC #CCCCCC #BBBBBB;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: normal;
    padding: 5px 14px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

请记住，他们使用 CSS3 声明来设置元素的样式，但您也可以使用背景图片。

【讨论】：

它通过使用背景图像来工作。将样式更改为： background: transparent url(imgpath.jpg) no-repeat center top;为了与图像精确匹配，需要设置宽度和高度。
很高兴听到它有效，您介意将我的答案设置为合适的吗？