CSS背景图片添加超链接

网站应用 - 八月 27, 2011 - 来源:单点日志 - 2 Comments -

每当我进入网站抄袭旗,文章也就大量产生了,记录为下次应用而备份,更为分享给有需要的人。在wp模板设计过程,大家都习以为常的在页头使用一个图片或者logo是一个图片,而这个图片是通过css定义来实现的,background-image,那么如果想要在这个logo上添加超链接怎么做呢。已经有人写了相关做法,自己回味下,大家一起来看看。

今天小安的谷歌搜索终于排到我的一篇文章上面去了,小安其实是个可怜的孩子,题外话。

网上找到了方法,比如我在新站e路航导航仪官网中的应用写法贴出来:

#header { width:950px; height:155px;  background-image:url(images/header.jpg);}

#header a{ display:block;  width:950px;  height:155px;  cursor:hand; }

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

<div id=”header”><a href=”http://www.daohangyis.com”> </a>

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

另外有些人可能在html页面中调用方法是class,那么同样是可以的,代码如下:

html中添加:<div class=”header”><a href=”http://www.daohangyis.com”> </a>

css部分代码如下:

.header { width:950px; height:155px;  background-image:url(images/header.jpg);}

.header a{ display:block;  width:950px;  height:155px;  cursor:hand; }

单点日志:http://spoint.babyshoot.cn



无觅相关文章插件,快速提升流量

《CSS背景图片添加超链接》由单点日志原创提供!
转载请注明:http://spoint.babyshoot.cn/archives/2011/08/css-background-image-to-add-hyperlinks.html

2 Comments│赶紧发话! »

发表评论

您必须登录后才能发表评论。
8