也谈为header的背景图片添加链接 at catch the digital flow

也谈为header的背景图片添加链接

2007年07月11日 | 网页设计占个座先

Jinwen在《为header的背景图片添加链接》一文中提到，要为header的背景图片（一般来说是给logo图片）加上链接，可以在定义有背景图片的div外面加上a属性：

这样的确可行，不过Jinwen也提到这样做通不过XHTML的W3C标准验证，那么怎么做才能既实现这个功能又符合W3C标准规范呢？方法有很多，我目前只找到下面4种方法，大家可以献计献策提出更好的方法来。

实现方法1：

<div id="header"><a href="http://mysite.com"><span>MySite.com</span></a></div>

#header a {
background: #fff url(images/header.png) no-repeat;
display: block;
height: 200px;
width: 780px;
}
#header a span {
visibility: hidden;
}

这种方法虽然符合W3C规范，但是却使用了Google等搜索引擎不喜欢见到的隐藏文字。为了符合W3C规范而冒着被Google处罚的风险是不值得的。

实现方法2：
算是方法1的改进，不使用隐藏文字，而是给span文字设置一个很大的负数偏移到屏幕外面去。例：

#header a span {
text-indent: -200000px;
}

这样就避免了方法1可能带来的坏处。

实现方法3：

这里不再把图片当作背景图片，因为没有被设置为background，但却能实现同样的效果，同时也规避了前两种方法的缺点。貌似这种方法应用很多。

实现方法4：

#header {
background: #fff url(images/header.png) no-repeat;
display: block;
height: 200px;
width: 780px;
}

--------下面是题外话--------
其实我这两天就一直在考虑这个问题，只是不知道为什么，我的新主题在IE下浏览问题有时会比较突出，所以暂时没把logo加上链接。

Tags: CSS, W3C