1

我正在使用该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某些阅读器无法使用。

4

4 回答 4

7

有很多方法可以做到这一点，这是我更喜欢的方式，效果很好，并且易于实现。

<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，这应该等于你的图像高度。

于 2009-01-29T08:18:20.037 回答
2

你为什么要使用负缩进 - 只需使用 img 标签的 alt 属性？

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>
于 2009-01-29T07:55:22.813 回答
2

@Partrik Hägne：你不应该使用display:none，因为一些屏幕阅读器会忽略它......

您可以在http://css-tricks.com上查看 CSS 图像替换的九种技术列表，其中描述了每种解决方案的优缺点。

于 2009-01-29T08:03:33.420 回答
0

您可以做的是删除缩进。并使用跨度来隐藏：

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

#header h1 span
{
  display: none;
}

您可能还必须设置 A 标记的宽度和高度，因为使用此技巧不会填充任何内容。

于 2009-01-29T07:49:49.907 回答