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

Question

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

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？而不是文本，代表徽标。

-伊恩

Answer 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" alt="Franken Development logo">
</a>

Answer 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