CSS文本替换为图像,需要超链接

Question

我正在使用该text-indent技术将我的<h1/>标签替换为我的网站图像,如下所示:

<h1 title="Homepage">My logo</h1>

CSS:

#header h1 {
    float: left;
    background: transparent url('../images/logo.png');
    width: 214px;
    height: 64px;
    text-indent: -9999px;
}

唯一的问题是我仍然希望新图像充当超链接.我试过做:

<h1 title="Homepage"><a href="#">My logo</a></h1>

但由于它是缩进的,因此链接也是如此.我想知道是否有人对如何做到这一点有任何建议,仍然是有效的XHTML.

编辑我宁愿以屏幕阅读器用户可访问的方式进行操作,从我阅读的内容开始,做display:none一些不适合某些读者的用户.

Answer 1

有很多方法可以做到这一点,这是我喜欢的方式,它运作良好,并且易于实现.

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

然后我做这个css,这也被称为"Leafy/Langridge图像替换"方法

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

您唯一需要编辑的是height,和padding-top.在这个例子中22px,它应该等于你的图像高度.