如何给HTML中的button按钮添加背景图片,图片不止一个,可以先看一下要求实现效果，注意：是两种颜色
能有具体代码提供参考吗，图片上的文字两行的字体大小不一样，谢谢！！ 展开
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：
<div style="width: 100px; height: 50px; font-size: 14px; cursor: pointer">
<div style="width: 100%; height: 25px;background-color: orange">这是文字1</div>
<div style="width: 100%; height: 25px;background-color: red">这是文字2</div>
</div>
3、浏览器运行index.html页面，此时按钮被添加上下两个不同颜色的背景。
<div style="width:131px; height:56px; background-color:#CCC; background:url(1.jpg) no-repeat top left ;">
<input type="button" value="22" title="按钮" style=" width:131px; height:56px; background-color:#CCC; background:url(2.jpg) no-repeat bottom left ; "/>
</div>
background后面的定位分别写成top left，和 bottom left。可以完成。
如果还要箭头作为添加背景图片，则需要添加额外的容器，将所有设置position属性，并用zoom来控制显示顺序，使箭头元素的zoom值高于其他就ok。
<input type="button" src="...">这是字体以<br>这是字体二</input>,
但是
这个图片怎么弄，两行字体大小不一样怎么解决啊，有没有办法
首先指出你的语法错误，input是单标记，不能在后面加上</input>
看一下解决方法，我用的是button来实现的。
<div style="width:131px; height:56px; background-color:#CCC; background:url(1.jpg) no-repeat top left ;">
<p style=" width:131px; height:56px; background:url(2.jpg) no-repeat bottom left; ">
<button style=" width:131px; height:56px; white-space: normal; padding:12px; padding-left:20px; background:none; background:url(241f95cad1c8a78689f206206609c93d71cf50c7.jpg) no-repeat 10px 20px;"" >文字文字文字一文字文字文字二</button>
</p>
</div>
其中1.jpg是上半部分的背景图片，2.jpg是下半部分的图片，
241f95cad1c8a78689f206206609c93d71cf50c7.jpg为箭头图片。
你在哪里看到这个的，发给我地址我看看，他是怎么做的，至于一个按钮没有必要这样麻烦，用了三个背景图片。
如果是这样只能把背景图片一张图。然后定位。
你的意思是 上面除了文字，其他的都作为一个背景图片吗，如果这样的话，写出来的代码肯定过不了关，不符合HTML5规范
呵呵，具体的代码如何实现啊。
是这样吗，我是初学者，不知道这样对不对
嗯，是的，但类型是image的button文字加上去好像也显示不出来，或者是这样写：文字一文字二，这样写的话类型就不用需要是image了
