如何在html中为提交按钮提供图像

目前我有一个这样的按钮

<input type="submit" id="button" name="submit" value="Generate Report" /> 

我必须为我给出的提交按钮使用一个图像，如下所示

<input type="image" id="continue" style="float:right;"  src="<?php echo base_url();?>images/Generatereports_btn.png" onmouseover="this.src='<?php echo base_url();?>images/Generatereports_high.png'" onmouseout="this.src='<?php echo base_url();?>images/Generatereports_btn.png'"/>

您可以将图像作为提交按钮的背景

检查这个

更新：
您要求的是
悬停

选中此项，然后尝试此项

   <input type="submit" id="button" name="submit" value="Generate Report" style="background:url(abc/in.jpg)repeat; /> 

试试这个

<input type="submit" value="" class="submit_style" />

CSS的可能复制将使样式更容易，特别是对于悬停、活动等状态。我需要给出两个图像，一个是正常显示的，另一个是当光标放置在其上时如何获取。它正在工作，谢谢。将图像添加到按钮后，modal为什么不起作用呢？@user2739848 modal？？你能详细解释一下吗？html psge将作为模式打开。但是当我使用图像时，它是作为一个总页面打开的，它不考虑高度和宽度provided@user2739848你的意思是图像的高度！==按钮或单击按钮，它将打开一个现在不工作的模式？
input[type=submit] {
    background-image: url('https://www.gravatar.com/avatar/c2d133677c207759e83d86e9fca4996a?s=32&d=identicon&r=PG&f=1');
}
input[type=submit]:hover {
    background-image: url('https://www.gravatar.com/avatar/fdae182b503055896b55c8c567e670a3?s=32&d=identicon&r=PG');
}

   <input type="submit" id="button" name="submit" value="Generate Report" style="background:url(abc/in.jpg)repeat; /> 

<input type="submit" value="" class="submit_style" />

.submit_style { 
    background-image: url(http://your_image_path.jpg);
    background-position:  0px 0px;
    background-repeat: no-repeat;
    width: 186px;
    height: 53px;
    border: 0px;

}