css - CSS Sprite 是否使用背景位置？

Question

我一直想查看和学习 CSS sprites，并注意到 Asos.com 在其页面页脚的社交图标上做了一些奇怪的事情。

他们的 7 个社交图​​标是从同一张图片中提取的，这是 CSS sprites 的官方使用吗？

<div class="scd-content-social">
<h5>Get more ASOS on:</h5>
<ul>
    <li class="fb"><a href="https://facebook.com/ASOS" target="_blank" data-di-id="di-id-15850b13-e42b9231"><span></span><strong>Facebook <em>›</em></strong></a></li>
    <li class="tw"><a href="https://twitter.com/ASOS_Menswear" target="_blank" data-di-id="di-id-910b744c-512d53c7"><span></span><strong>Twitter <em>›</em></strong></a></li>
    <li class="gp"><a href="https://plus.google.com/+ASOS" target="_blank" data-di-id="di-id-cd4fa4d5-3ad09aa1"><span></span><strong>Google + <em>›</em></strong></a></li>
    <li class="pn"><a href="http://uk.pinterest.com/asos/" target="_blank" data-di-id="di-id-cd4fa4d5-27b4fffa"><span></span><strong>Pinterest <em>›</em></strong></a></li>
    <li class="in"><a href="http://instagram.com/asos_menswear" target="_blank" data-di-id="di-id-910b744c-4c04a8f6"><span></span><strong>Instagram <em>›</em></strong></a></li>
    <li class="yt"><a href="https://youtube.com/asosmenswear" target="_blank" data-di-id="di-id-6072ab01-c56c7ff"><span></span><strong>YouTube <em>›</em></strong></a></li>
    <li class="tb"><a href="http://asosmenswear.tumblr.com/" target="_blank" data-di-id="di-id-6072ab01-a5291fd9"><span></span><strong>Tumblr <em>›</em></strong></a></li>
</ul>

Answer 1

这看起来更像是一个用于反向链接的帖子，但是，是的，CSS Sprite 使用 background-position 来确定显示图像的哪一部分。

这是一个基本示例，说明 spritesheet 如何在 CSS 中工作，使用 a random spritesheet of Pokemon I found on Google .可以找到在真实网络上运行的 spritesheet 示例 on Google itself .

div.spritesheet {
  width: 64px;
  height: 64px;
  background-image: url(http://i.imgur.com/Q3auuYO.png);
  background-repeat: no-repeat;
  
  /* The spritesheet has 36 images, repeated 6x6 */
  background-size: calc(6 * 36);
}

div.spritesheet[data-id="pikachu"] {
  /* Pikachu is 0 rows from the left 1 row from the top */
  background-position: 0 calc(-1 * 64px);
}

div.spritesheet[data-id="electrode"] {
  /* Electrode is 1 row from the left 2 rows from the top */
  background-position: calc(-1 * 64px) calc(-2 * 64px);
}

Vulpix?:
<div class="spritesheet"></div>

Pikachu:
<div class="spritesheet" data-id="pikachu"></div>

Electrode:
<div class="spritesheet" data-id="electrode"></div>

我对 Sprite 宝可梦了解不多，但这是一个基本实现，使用一个文件存储多张图片，并使用background-position设置哪张图片可见。

如果您谈论的是 data-di-id="di-id-6072ab01-a5291fd9"(无论这意味着什么)，这在 CSS 或 HTML 中没有任何意义。这只是一个 data attribute Sprite 生成器可能会将它们作为输出提供，因为编写非方形 CSS Sprite 表并保持更新可能会令人恼火。