css - 如何使用 CSS sprites 创建图像链接

Question

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

Answer 1

您可以使用标准 <a>元素来创建链接。然后使用 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/