如何使用 CSS 精灵制作图像 link

Question

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

Answer 1

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

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

您必须使用这些资源详细说明我的示例：

如何使用 CSS 精灵制作图像 link

How to make an image link using CSS sprites

css

css-sprites