|
Web2.0时代，在网页设计中用背景图片做为超链接已成为主流，通过CSS的控制，使鼠标移到图片上能有很好的变换效果，虽然用普通的插入图片的方法也能实现效果，但用CSS更为方便，再配合css sprite，还能加快图片的加载。所以今天就向大家介绍CSS中用背景图片做为超链接的方法。 实现这样的效果只需要直接在div中加上一个空的超链接，然后通过CSS来控制，CSS设置的关键是要加上display:block;和cursor:hand;这样鼠标移上去就会有超链接的感觉，如果你设计一个好看的背景的话效果真的不错，具体的代码如下所示，下面代码中为了方便理解，用到了两张背景图片，你也可以把图片做在一起，通过css sprite来控制：
<!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>CSS中用背景图片做为超链接的方法_HTMer</title> <style type="text/css"> .htmer a{margin:0px;padding:0px;background:url(images/htmer_bg.jpg) no-repeat;display:block;width:87px;height:36px;cursor:hand;} .htmer a:hover{background:url(images/htmer_bg_hover.jpg) no-repeat;} </style> </head> <body> <div class="htmer"><a href="http://www.45it.com" target="_blank"></a></div> </body> </html> |