无法提供指向徽标的锚链接

Posted 2023-03-05

【中文标题】无法提供指向徽标的锚链接

【英文标题】：Can't give anchor link to logo

【发布时间】：2021-05-23 08:12:25

【问题描述】：

我目前正在制作一个网站，并且我已将我的徽标放入如下：

header .logo a 
  background-image: url(Images/FRANKEN\ DEVELOPMENT\ FATTER\ AND\ OTHER\ COLOR2.png);
  background-size: 250px;
  display: inline-block;
  height: 80px;
  text-indent: -9999999px;
  width: 300px;
  background-repeat: no-repeat;
  position: relative;
  top: -21px;
  left: 25px;
  filter: contrast(2);

<header>
  <nav>
    <ul id="navbar">
      <li class="logo"><a>Franken Development Logo</a></li>
      <li><a class="categories" href="#">Home</a></li>
      <li><a class="categories" href="#">Websites</a></li>
    </ul>
  <nav>
<header>

如您所见，我的文本超出框架，文本缩进：-9999999px；

但是要知道，当我将其设为链接（徽标）时，它将不起作用，因为文本将成为链接（远离视觉）而不是图像。

如何使我的徽标进入 index.html？而不是文本，代表徽标。

-伊恩

【问题讨论】：

您的链接上没有 href 属性，因此无处可去，也无处可点击。 <li class="logo"><a href="index.html">Franken Development Logo</a></li>会工作。 - 除了我怀疑 Franken Development Logo 是 index.html 的标题之外：) 如果它是一个 ，它看起来就像一个标志的 alt 值。 ;)

【参考方案1】：

如果您想要一个徽标和文本来代表您的公司名称，您可以将两者都包装在一个锚标记中。

例子：

带有可见文字：

<a href="/index.html">
    <img src="/image/path/here" aria-hidden="true">
    <p>Franken Development</p>
</a>

使用替代文本而不是可见文本：

<a href="/index.html">
    <img src="/image/path/here" >
</a>

【参考方案2】：

对图像本身使用 Href。

header .logo a 
  background-image: url(Images/FRANKEN\ DEVELOPMENT\ FATTER\ AND\ OTHER\ COLOR2.png);
  background-size: 250px;
  display: inline-block;
  height: 80px;
  text-indent: -9999999px;
  width: 300px;
  background-repeat: no-repeat;
  position: relative;
  top: -21px;
  left: 25px;
  filter: contrast(2);
  border: 2px solid grey;

<header>
  <nav>
    <ul id="navbar">
      <li class="logo"><a href="#">Franken Development Logo</a></li>
      <li><a class="categories" href="#">Home</a></li>
      <li><a class="categories" href="#">Websites</a></li>
    </ul>
    <nav>
      <header>

Source

【讨论】：

此解决方案依赖于 javascript，这意味着对于禁用 JavaScript 的用户或 JavaScript 无法加载的情况，它会失败。 HTML 中的 标记允许您传递href，我们应该在查看 JS 解决方案之前使用默认的 HTML 行为。

您更新的示例将 href 属性添加到列表 (li) 项中，这是无效的。 href 属性需要添加到a 标签中。

那为什么不让锚点可点击呢？