0

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

所以我用徽标作为背景图像，H1 中的公司名称，并使用图像替换技术隐藏 H1。

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

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

4

1 回答 1

6

非常简单 -<a href="/home">Company name</a>在 H1 元素中放置一个，并将图像替换样式应用于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 */;
}

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

让我知道你怎样去！

于 2011-11-11T20:55:33.753 回答