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

Answer 2

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

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>

Answer 3

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

您可以在Nine Techniques for CSS Image Replacement上看到http://css-tricks.com的列表，其中介绍了每种解决方案的缺点和优点。

Answer 4

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

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

#header h1 span
{
  display: none;
}

您可能还必须设置A标签的宽度和高度，因为没有任何东西使用此技巧填充。

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

4 个答案: