CSS背景图片加超链接

来源:互联网 发布:电脑windows什么意思 编辑:程序博客网 时间:2024/05/17 01:24

在做页面时候,有时难免会把图片图片做成背景,但是又想加个链接,可以采用正面的办法解决。

#logo { width:249px; height:62px;  background-image:url(images/logo.gif);}

#logo a{ display:block;  width:249px;  height:62px;  cursor:hand; }

 然后在<html>里加入以下代码

 <div id="logo"><a href="http://www.cctv.com"></a>

用IE浏览图片就能有超链接,鼠标并以一个小手出现,在dreamweaver效果是一样的。

 特别说明:为背景加超链接时必须加display:block,并且按Logo图片的大小定义好它的宽和高。这样才能达到想要的效果。


a 元素是是一个行内元素,display:block;就是将他强行转化为块级元素。行内元素没有没有上下填充。display:block;是让连接表现得像块极元素,增大起点击区域。以为你后面的a:hove背景图片的实现打下基础。

原创粉丝点击