html - 无法提供指向 Logo 的 anchor 链接

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；
但是要知道，当我将其设为链接( Logo )时，它将不起作用，因为文本将成为链接(远离视觉)而不是图像。
如何使我的 Logo 转到 index.html？而不是文字，代表标志。
-伊恩

Answer 1

如果您想要一个标志和文本来代表您的公司名称，您可以将两者都包裹在一个 anchor 标签中。
例子:
带有可见文本:

<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>