CSS实现带背景图片的文字链接的方法

日期：2007年8月31日作者：查看:[大字体中字体小字体]

在论坛闲逛，遇到一个朋友提出了一个关于“CSS实现带背景图片的文字链接”的问题。

贴子原文如下：

　　我想做成第一种图片的效果。可是按我自己的代码写下来就成了第二种效果，字有多大背景就是多大，不会完全显示出来。晕。

　　有什么办法解决么。

　　a{text-decoration:none;}
　　a.left:link{color:#353535;}
　　a.left:visited{color:#353535;font-size: 11pt;font-weight: bolder;
　　text-align:center;background-image: url(images/0014.gif);}
　　a.left:hover,a:active,a:focus{color:#353535;}

其实这个问题的主要思路是这样的：

　　将A设置为块元素，图片是此元素的背景。

　　在悬停状态，不仅可以设置文字的效果，还可以设置背景图片是不是变化。

　　我们首先准备一张背景图片：

我们看下面的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页教学网www.webjx.com</title> <style type="text/css"> * { font-size:12px; text-align:center; } a { display:block; width:100px; height:30px; color:#353535; line-height:30px; text-decoration:none; background:url(http://www.webjx.com/upfiles/20070830/20070830161811_01.png) no-repeat 0 0; } a:hover { color:#000; background:url(http://www.webjx.com/upfiles/20070830/20070830161811_01.png) no-repeat 0 -30px; } </style> </head> <body> <a href="http://www.webjx.com/">Webjx.Com</a> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

关于代码的依秩序说明如下：
[1] [2] 下一页
CSS实现带背景图片的文字链接的方法相关文章：
·Photoshop将普通照片处理为圣诞夜景
·三维景观软件Vue 5 Esprit函数碎片节点
·Photoshop处理风景照片为仙境特效
·Photoshop变晴朗白天照片为黄昏景象
·三维景观软件Vue 5 Esprit函数纹理图节点
·宽屏炫丽色彩背景壁纸
·宽屏炫丽色彩背景壁纸
·让QQ空间播放多首背景音乐技巧
·古典优雅德国美丽风景第二弹
·Photoshop调出MM亮丽包包和背景
CSS实现带背景图片的文字链接的方法相关软件
·《魔兽世界》最新的场景宣传片
·《暗黑破坏神》崔斯特瑞姆背景音乐
·《水景纸牌之美洲瀑布》休闲试玩
·《星际争霸2》战斗场景视频
·图片欣赏-世界50大美景
·米芾《多景楼》册
·美术欣赏-中国名家版画汇粹：中华百景图
·“中华第一景”系列游记
·《迪斯尼夜景》图集
·入不思议解脱境界普贤行愿品_男声朗诵版(多背景音乐)

上一篇:CSS：鼠标经过时改变背景颜色或图片

下一篇:警方揭秘色情网站敛财内幕六大手段

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS实现带背景图片的文字链接的方法

精品推荐

热点TOP10

特别推荐