当前位置:Gxlcms > 前端框架 > html怎么设置图片按钮

html怎么设置图片按钮

时间:2021-07-01 10:21:17 帮助过:405人阅读

html设置图片按钮的方法:首先创建一个HTML示例文件;然后通过button标签创建一个按钮;最后通过background属性设置图片即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

html中把图片变成按钮

代码如下:

<input type="image">
<input type="submit" style="background: url('图') no-repeat;">
<input type="button" style="background: url('图') no-repeat;" οnclick="提交的js">
<button style="background: url('图') no-repeat;" οnclick="提交的js">文字</button>
<img src="图" οnclick="提交的js">
<span style="border:1px solid #000000;background: url('图') no-repeat;" οnclick="提交的js">&nbsp;</span>

相关介绍:

<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

661941c93676a9640486389974d0137.png

【推荐学习:html视频教程】

以上就是html怎么设置图片按钮的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行