为什么带有背景图像的 HTML 按钮呈现丑陋的效果？答案

【问题标题】：Why has HTML Button with Background Image an UGLY rendering?为什么带有背景图像的 HTML 按钮呈现丑陋的效果？
【发布时间】：2015-06-17 08:47:38
【问题描述】：

<input type="button" value="Nice" />
<input type="button" value="Ugly"
style="background-image:url('http://i.stack.imgur.com/M8lk7.png');
background-repeat:no-repeat;
background-position:left center;
padding-left:150px;
height:160px" />

看看：https://jsfiddle.net/pbgmzp7j/

有解决办法吗？

【问题讨论】：

是的，添加您自己的样式。您可以随意设置任何样式，首先添加 border: 1px solid #color; 、 border-radius: 3px; 和 background-color: #fff;
我不想以特定方式设置按钮样式。我喜欢原始的浏览器样式，就像“Nice”按钮一样。
不要把所有的风格都放在你的“漂亮”按钮的代码上并更改文本......

标签： html css button background-image imagebutton

【解决方案1】：

在没有输入和使用按钮的情况下尝试一下

<button>
    <img src="http://i.stack.imgur.com/M8lk7.png"/>
</button>

JSFiddle

【讨论】：

很好的解决方案谢谢。不幸的是，我必须用 JSF1.4 来做。我必须弄清楚那里是如何工作的。谢谢。

【解决方案2】：

试试这个

background-color:transparent;
border:none;

或者你可以在bg中使用任何颜色。 demo

【讨论】：

其实我喜欢有原始的按钮样式。为什么会出现这种丑陋的渲染？

【解决方案3】：

使用：

cssborder:none;DEMO

<input type="button" value="Nice" />
<input type="button" value="Ugly" style="background-image:url('http://i.stack.imgur.com/M8lk7.png'); background-repeat:no-repeat; background-position:left center; padding-left:150px; height:160px; border:none;" />

更新：

DEMO

【讨论】：

其实我喜欢有原始的按钮样式。为什么会出现这种丑陋的渲染？