如何正确使用CSS Image sprite？

Question

我有一个网站，我正在努力加快，我在这里和那里做小事。我想做的其中一件事但却从未学过如何做的就是利用图像精灵。

此处示例：http://flag-sprites.com/

以下面的代码为例：

<ul>
<li><div class"flag flag-zw"></div> Country Name</li>
<li><div class"flag flag-zw"></div> Country Name</li>
<li><div class"flag flag-zw"></div> Country Name</li>
<li><div class"flag flag-zw"></div> Country Name</li>
</ul>

我正试图让国旗出现在国名旁边。这个精灵是预定位的，所以我所要做的就是放置图像并调用类。非常感谢任何帮助，谢谢！

Answer 1

这是 FIDDLE

<ul>
  <li><span class="flag flag-ad"></span>Country Name</li>
  <li><span class="flag flag-ae"></span>Country Name</li>
  <li><span class="flag flag-af"></span>Country Name</li>
  <li><span class="flag flag-ag"></span>Country Name</li>
</ul>


.flag {
  background: url(http://s22.postimg.org/u0nt2h8qp/flags.png) no-repeat;
  display: inline-block;
  margin-right: 10px;
  width: 16px;
  height: 11px;
}
.flag.flag-ad { background-position: -16px 0 }
.flag.flag-ae { background-position: -32px 0 }
.flag.flag-af { background-position: -48px 0 }
.flag.flag-ag { background-position: -64px 0 }

Answer 2

看起来已发布的代码示例可以满足您的需求。但是，除此之外，我还想建议工具Sprite Cow。该工具使得查找css位置值非常容易。

Answer 3

你走了：

我会将标志 span ，但div也可以：

<li><span class="flag flag-aw"></span> Aruba</li>

CSS

.flag {width: 16px; height: 11px; background: url("http://static.flag-sprites.com/i/flags.png") no-repeat 0 0; margin-right: .3em; display: inline-block;}

.flag-aw {background-position: -224px 0;}

示例：

FIDDLE

..没有必要打扰“blank.gif”。如果您有Phtoshop或GIMP（免费），您可以获得图像所在的适当尺寸。