Question

<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/

有解决方法吗？

Answer 1

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

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

JSFiddle

Answer 2

试试这个

background-color:transparent;
border:none;

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

Answer 3

使用：

css border: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

为什么带背景图像的HTML按钮是UGLY渲染？

3 个答案: