html - CSS Sprite 在 项中不起作用

Question

我有一个带有 4 个社交 sprite 按钮的 sprite-sheet，经过数小时的研究后我无法将其用作列表项。每个 sprite 按钮应该占据与 sprite-sheet 中相同的背景位置。我什至尝试设置每个背景位置:0 0；没有成功。 如有任何建议，我们将不胜感激。

.s-1-facebook,
.s-2-tweet,
.s-3-google,
.s-4-email {
  <!--background-image: url('http://i.stack.imgur.com/tpoaF.png');-->
  background-image: url('images/sprites.png');
  background-repeat: no-repeat;
  display: inline-block;
  list-style: none;
  margin: -12px 0 0 -16px;
  position: relative;
}
.s-1-facebook {
  display: inline-block;
  list-style: none;
  background-position: 0 0;
  width: 32px;
  height: 32px;
  position: absolute;
}
.s-2-tweet {
  display: inline-block;
  list-style: none;
  background-position: -32px 0;
  width: 32px;
  height: 32px;
  position: absolute;
}
.s-3-google {
  display: inline-block;
  list-style: none;
  background-position: -72px 0;
  width: 32px;
  height: 32px;
  position: absolute;
}
.s-4-email {
  display: inline-block;
  list-style: none;
  background-position: -108px 0;
  width: 32px;
  height: 32px;
  position: absolute;
}

<ul>
  <li class="s-1-facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F12phillipstreet.com" target="_blank" title="Share on Facebook"></a>
  </li>
  <li class="s-2-tweet">
    <a href="https://twitter.com/intent/tweet?source=http%3A%2F%2F12phillipstreet.com" target="_blank" title="Tweet"></a>
  </li>
  <li class="s-3-google">
    <a href="https://plus.google.com/share?url=http%3A%2F%2F12phillipstreet.com" target="_blank" title="Share on Google+"></a>
  </li>
  <li class="s-4-email">
    <a href="mailto:?subject=&body=:%20http%3A%2F%2F12phillipstreet.com" target="_blank" title="Email"></a>
  </li>
</ul>

Answer 1

在 CSS 中使用 Sprite 的技巧

让我们以 image 为例你提供的例子。图片的宽度为 140px，高度为 32px。

由于我们在图像中有 4 个均匀分布的图标，我们可以假设每个图标都有 35px 宽度 (140/4) 和 32px 高度。

为了使 Sprite 工作，我们必须将这些宽度/高度值分配给我们选择的元素，在您的情况下，我们将使用标签 a在每个 li 里面.

要更改每个类中显示的图标，我们将使用 CSS 属性 background-position .

因为我们已经知道我们的 Sprite 有 4 列和 1 行，所以我们只需要使用 x位置(使用 35 的因子)。

例子

ul.social {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.social li {
  float: left;
}
ul.social a {
  background-image: url('http://i.stack.imgur.com/tpoaF.png');
  width: 35px;
  height: 32px;
  display: inline-block;
}
ul.social li.s-2-tweet a {
  background-position: -35px 0;
}
ul.social li.s-3-google a {
  background-position: -70px 0;
}
ul.social li.s-4-email a {
  background-position: -105px 0;
}

<ul class="social">
  <li class="s-1-facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F12phillipstreet.com" target="_blank" title="Share on Facebook"></a>
  </li>
  <li class="s-2-tweet">
    <a href="https://twitter.com/intent/tweet?source=http%3A%2F%2F12phillipstreet.com" target="_blank" title="Tweet"></a>
  </li>
  <li class="s-3-google">
    <a href="https://plus.google.com/share?url=http%3A%2F%2F12phillipstreet.com" target="_blank" title="Share on Google+"></a>
  </li>
  <li class="s-4-email">
    <a href="mailto:?subject=&body=:%20http%3A%2F%2F12phillipstreet.com" target="_blank" title="Email"></a>
  </li>
</ul>