|
CSS实现带背景图片的文字链接的方法(1) 在论坛闲逛,遇到一个朋友提出了一个关于“CSS技巧">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设置为块元素,图片是此元素的背景。
在悬停状态,不仅可以设置文字的效果,还可以设置背景图片是不是变化。
我们首先准备一张背景图片:
我们看下面的效果:
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
关于代码的依秩序说明如下:
|