CSS背景图片添加超链接

| | Comments (2)



每当我进入网站抄袭旗,文章也就大量产生了,记录为下次应用而备份,更为分享给有需要的人。在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


2 Comments

背景加超链接时为什么必须加display:block呢?

不加试试看哦,block应该是块的意思

Leave a comment


Type the characters you see in the picture above.

Archives

Ads by google

Pages

Powered by Movable Type 4.24-en

About this Entry

This page contains a single entry by 单点日志 published on August 27, 2011 5:22 PM.

dedecms arclistsg typeid 栏目ID实现调用动态参数 was the previous entry in this blog.

JS实现 css加载随机背景图片 is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.