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

最新推荐文章于 2021-06-02 22:21:22 发布

幻梦星空

最新推荐文章于 2021-06-02 22:21:22 发布

阅读量3.3k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_25214695/article/details/51150052

版权

html 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
图片大小固定的html+css图片提交按钮代码

最近做手机端的开发有时会遇上点击两次按钮才会触发事件的情况，那么该如何来解决呢？1、示例一、图片大小固定但是文字已经写到了图片上的html+css图片提交按钮代码示例一、图片大小固定，但是文字已经写到了图片上html+css图片提交按钮代码，input的css样式中的background:transparent; border:none;是必须的。宽高大小根据你的图片大小来
复制链接

扫一扫

专栏目录