Question

目前我有一个像这样的按钮

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

如果正在显示图像图像正在显示，但它不能作为提交按钮。如果我提供类型作为提交图像没有显示我做错了什么

还有一件事是我有另一个按钮

<span class="button" style="margin-left:525px;padding-top:8px;" ><a style="color: #FFFFFF;" href="add_user?height=500&width=650&modal=false" 
                            class="thickbox">Add User</a></span>

如果使用上面的图像，页面不会显示为模态，而是显示为新页面。

请某人帮助我谢谢。

Answer 1

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

input[type=submit] {
    background-image: url('https://www.gravatar.com/avatar/c2d133677c207759e83d86e9fca4996a?s=32&d=identicon&r=PG&f=1');
}

选中此fiddle

更新

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');
}

您提出的问题是 hovering

选中此JSFiddle2

Answer 2

嗨试试这个，

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

Answer 3

试试这个

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

添加此css

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

}

如何将图像提供给html中的提交按钮

3 个答案:

更新