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曾经存在问题 - 现在不是很多问题）。

让我知道你怎么去！

H1图像替换的语义标识......没有任何可点击的内容？

1 个答案: