图片大小固定的html+css图片提交按钮代码

来源：互联网发布：涉水险有必要买吗知乎编辑：程序博客网时间：2024/06/05 08:13

最近做手机端的开发有时会遇上点击两次按钮才会触发事件的情况，那么该如何来解决呢？

1、示例一、图片大小固定但是文字已经写到了图片上的html+css图片提交按钮代码

示例一、图片大小固定，但是文字已经写到了图片上html+css图片提交按钮代码，input的css样式中的background:transparent; border:none;是必须的。宽高大小根据你的图片大小来定义。

2、示例二、图片大小固定，但是文字使用input自己的文字的css图片提交按钮代码

示例二、图片大小固定，文字为提交按钮自带文字的html+css图片提交按钮代码，input的css样式中的background:transparent; border:none;是必须的。宽高大小根据你的图片大小来定义。

下面是代码部分，仅供参考：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片大小固定的html+css图片提交按钮代码 - 懒人建站-Jquery 特效_JS代码_JS广告代码</title> <meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" /> <meta name="description" content="懒人建站为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。" /> <style> /*初始化*/ html,body,input{ padding:0px; margin:0px;} html,body{ font-size:14px; font-family:"宋体"; line-height:175%;} body{ padding:50px;}/*为了让内容不靠边框加的，使用中可以删除*/ /*图片大小固定但是文字已经写到了图片上*/ #but_ok1{ width:66px; height:26px;vertical-align:middle;background:transparent; border:none; text-indent:-99999px; cursor:pointer;background-image: url(but_dl.jpg);background-repeat:no-repeat;background-position:left top;} /*图片大小固定但是文字使用input自己的文字*/ #but_ok2{ width:75px; height:28px; line-height:28px; text-align:center;vertical-align:middle;background:transparent; border:none; font-weight:bold; color:#ffffff; cursor:pointer; font-size:15px; background-image: url(but1.png);background-repeat:no-repeat;background-position:left top;} #but_ok2:hover{background-position:left bottom;} </style> <style type="text/css"> .un-banner {display:none!important;display:none}</style> <script async src="http://c.cnzz.com/core.php"></script></head> <body> <strong>示例一、图片大小固定但是文字已经写到了图片上的html+css图片提交按钮代码</strong><br/> <input name="" type="submit"value="登录"id="but_ok1"/> <p> 示例一、图片大小固定，但是文字已经写到了图片上html+css图片提交按钮代码，input的css样式中的background:transparent; border:none;是必须的。宽高大小根据你的图片大小来定义。 </p> <strong>示例二、图片大小固定，但是文字使用input自己的文字的css图片提交按钮代码</strong><br/> <input name="" type="submit"value="登录"id="but_ok2"/> <p> 示例二、图片大小固定，文字为提交按钮自带文字的html+css图片提交按钮代码，input的css样式中的background:transparent; border:none;是必须的。宽高大小根据你的图片大小来定义。 </p>

参考文章url：http://www.51xuediannao.com/js/css/butimg/butimg1.html

0 0