首页 > 代码库 > Css 单图片按钮实例(css 图片变换)
Css 单图片按钮实例(css 图片变换)
1.场景描述，根据鼠标的移动，动态的切换按钮图片。
2.方法1，准备两张120*41的图片，一张正常状态图片，一张按下效果图片。在鼠标放在的按钮上设置按下图片，移开又恢复到正常状态图片。缺点：在网页上按下的图片需要下载，会出现鼠标移动上去，未马上切换效果。
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>两张图片按钮实例</title><style type="text/css">#theLink{ display:block; width:120px; height:41px; margin:0 auto; background:url(images/normal.gif) no-repeat;}#theLink:hover{background:url(images/press.gif) no-repeat;}</style></head><body><a id="theLink"></a></body></html>
3.方法2，整个设置一张图片，120*82，根据显示的需要，动态的截取显示尺寸。优势：在网页上可以一次下载完全一张图片，节约资料效率。
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>单张图片按钮实例</title><style type="text/css">#theLink{ display:block; width:120px; height:41px; margin:0 auto; background:url(images/buttonBG.gif) no-repeat;}#theLink:hover{ background:url(images/buttonBG.gif) no-repeat 0 -41px;}</style></head><body><a id="theLink"></a></body></html>
Css 单图片按钮实例(css 图片变换)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。