搜 索

在网页中给按钮加上背景图片

编辑:QTOOL.NET日期:2019-09-20422

有时候,在我们制作表单页面时,觉得表单的按钮太过的单调,如果想给这些按钮添加上图片该怎样实现.
1、在css中定义指定按钮的样式以及增加按钮的背景.
代码如下:
<input type="button" id="anniu" name="anniu" value=""/>
首先创建一个id名称为anniu的网页元素 给其添加属性为button按钮.
 
<style type="text/css">
#anniu {
border-width: 0px;
border-style: none;
width: 71px;
height: 61px;
background-image: url(背景图片URL地址);
border-radius: 10px;
background-repeat: no-repeat;
background-color: rgba(255,255,255,0.00);
}
</style>
 
设置id="anniu"的元素的css样式,首先清除button自带的边框以及样式,然后设置按钮长度与宽度,增加button的背景图片,设置圆角等.
 
2、使用js代码与图片配合,通过js判断图片点击来实现按钮的相关功能
 
<a href="javascript:zbutton();"><img onclick="submit()"  src="button图片URL地址" style="cursor:pointer;" />
</a>
<script type="text/javascript">
function zbutton() {
   按钮要执行的操作
}
</script>
 
3、将input属性设置为type="image",这样按钮会自动提交表单.
 
<input type="image" id="button1" src="按钮的背景图片"  onclick="" style="width:100px;height:100px"/>
 
由于type="image"属性只可以提交不能实现其他如重置等操作,我们可以在onclick=""中写入相应的代码javascript:document.forms['表单名称'].reset(); return false;
 
合理的使用背景图片可以使我们的按钮更加的丰富多彩.

TAG标签:css
此文章由QTOOL.NET编辑
最新文章

热门标签