执行内联图像精灵的最佳方法是什么？

Question

经过一些研究后，我发现我可以将透明GIF拉伸到精灵大小并将背景设置为带有偏移的精灵图像。

请参阅：http://jsfiddle.net/iambriansreed/6bT3j/embedded/result

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
    width="30" height="30" style=" background: -88px -223px 
        url('http://ssl.gstatic.com/gb/images/j_f11bbae9.png');"
>

这是创建内嵌图像精灵的最佳，最干净的方法吗？

Answer 1

以下是Google的主页CSS Sprite（你会看到不需要透明的gif）。

如果图像具有semantic含义，例如它是文章的中心标识或图片，那么这是最好的技术。

但是，如果您加载的图片没有semantic含义，例如它是一个仅用于装饰的导航图像，然后您可能想要使用CSS to load the image而不是图像标记。

  

Google CSS Sprite

  

<强> HTML

<div class="nojsv" id="logocont" style="left: 0px; position: absolute; visibility: visible; ">
  <h1>
    <a id="logo" href="https://www.google.co.uk/webhp?hl=en" title="Go to Google Home">
      Google
        <img width="167" height="389" src="/images/nav_logo104.png" alt="">
    </a>
  </h1>
</div>

  

<强> CSS

#logo {
  display: block;
  height: 41px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 114px;
}

Answer 2

我相信我的方式如上所述是加载图片精灵的最佳方式。

我只添加了查看该精灵所需的CSS，并将StyleSheet中的所有其他CSS保留在其所属的位置。

虽然图像的真实来源是透明GIF，无论你使用实际的gif还是上面例子中的数据等效，精灵图像都被设置为背景和偏移以显示所需的精灵。

它可以将img标记用于其预期目的：例如alt属性和标记的默认内联显示。

具有某些内联css的单个图像标记比我见过的任何其他内容都少得多，并且可以在需要的地方添加语义html。