html - 带有 H1 图像替换的语义标志......没有什么可以点击的？

Question

我正在编写一个网站，该网站的左上角有一个大公司 Logo 。

所以我用 Logo 作为背景图像进行编码，在 H1 中使用公司名称，并使用图像替换技术隐藏 H1。

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

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

Answer 1

非常简单 - 放一个 <a href="/home">Company name</a>在你的 H1 元素中，并将你的图像替换样式应用到 h1#logo a (或您使用的任何选择器)。您需要添加 display:block;样式，让 anchor 正确运行。

如果您需要比这更详细的信息，请告诉我!

额外的细节:

好的 - 我通常使用以下 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 */;
} 

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

告诉我你过得怎么样!