使用H1图像替换的语义标识...不会留下任何点击？

Question

我正在为左上角有一个大公司徽标的网站编码。

因此，我使用徽标作为背景图像，公司名称在H1中编码，并使用图像替换技术隐藏H1。

但是网站的其他部分没有“主页”链接。该徽标可能旨在成为“主页”链接。但由于语义/图像替换技术，没有什么可点击的。

你会在这种情况下做什么？在商标上放置透明的东西是我的第一个想法，但我想听听其他建议。

Answer 1

非常简单 - 在你的H1元素中放入<a href="/home">Company name</a>，并将图像替换样式应用到h1#logo a（或任何你使用的选择器）。您需要将display:block;添加到样式中，以确保锚点的行为正确。

让我知道你是否需要比这更多的细节！

额外的细节：

行 - 我通常使用下面的HTML和CSS图片替换：

HTML：

<h1 id="logo"> 
    <a href="/home" title="Back to the home page">[Company name]</a> 
</h1> 

CSS

#logo a { 
    display:block; 
    width: 200px; /* Or whatever you like */ 
    height: 0; 
    padding-top: 100px; /* The required height */ 
    text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */ 
    overflow: hidden; 
    background: /*whatever you like */; 
} 

这是一种“双倍强度” - 高度：0/padding-top技术创建一个您需要的大小的框，但没有任何文字显示空间（背景图像将显示在顶部填充中，但文字不会）。大的负面文本缩进只是浏览器的安全问题，偶尔会出现问题（旧的webkit曾经有问题 - 现在没什么问题）。

让我知道你走了！