将背景图像设置为html按钮？

Question

我有以下代码将背景图像设置为按钮。

CSS：

input.hButton{
    background-image: url('images/hbutton.png');
    height: 21px;
    width: 110px;
    text-align: center;
    color: #696969;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    display:block;
}

HTML：

<input type="button" class="hButton" id="customize" value="Customize Table"></input>

输出：

这里当按钮文本太长时，按钮被分割。我怎样才能修好它？

Answer 1

添加背景大小：100％100％;

或者在这里找到你的完美环境：http://www.css3.info/preview/background-size/

你的情况应该更好：

 use a gradient
 use border-radius for the upper corners
 use a thin border

Answer 2

用这个替换你的css代码background-image属性：

background-image：url（'images / hbutton.png'）top repeat-y;

Answer 3

嗨，请使用纯CSS代码..并删除您的旧方法..

小提琴：HTTP：http://jsfiddle.net/nikhilvkd/RZ4vV/1/

什么在这里？

1-梯度

2边界半径

3.border top，right和left

.hButton{

    border:solid 1px #0e4f85;
    border-bottom:none;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    padding:3px;
    color:#696969;
    background: #f7f5f5; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f5f5 0%, #e0dede 50%, #e0dede 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5f5), color-stop(50%,#e0dede), color-stop(99%,#e0dede)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f5f5', endColorstr='#e0dede',GradientType=0 ); /* IE6-9 */

    }