如何使用CSS sprites制作图像链接

Question

我有一个实习和我的任务，尝试使用CSS Sprites创建一个网站。下面是我正在使用的图像，我找到了一种只用CSS显示我想要的图标的方法。但是现在，我试图找出如何链接它们。例如，如果我只想要Facebook图标链接，我该怎么办？

Answer 1

您可以使用标准<a>元素来创建链接。然后使用css，您可以为每个css设置背景图像/位置。类似的东西（你必须学习如何做）：

<style>
  .SocialNav > a {
    background-image: ...;
  }

  .Facebook {
    background-position: ...;
  }

  .Twitter {
    background-position: ...;
  }
</style>

<nav class="SocialNav">
  <a href="https://" class="Facebook" aria-label="Facebook"></a>
  <a href="https://" class="Twitter" aria-label="Twitter"></a>
</nav>

你必须用这些资源详细说明我的例子：

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
• https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/