html - 如何从图标集图片中加载一个图标

Question

我对web前端不是很熟悉。

网页设计师给了我 JPG 文件，它是一个充满图标的栏。

但我需要的是一个一个地使用这些图标。

我不知道是否有一种简单的方法可以从这张大图片中加载单个部分，例如:

load_part_from_picture (fileName,oneIconSize=80x80, index=1) 

或者我只需要将这些图标切割成单个图标。

我的编程语言是 ASP.Net 和 C#

非常感谢!

Answer 1

ul li {
  background-image: url('http://i.stack.imgur.com/3fmAx.png');
  background-repeat: no-repeat;
  height: 60px;
  width: 60px;
  display: inline-block;
}

ul li:nth-child(2) {
  background-position: -60px 0;
}
ul li:nth-child(3) {
  background-position: -120px 0;
}
ul li:nth-child(4) {
  background-position: -180px 0;
}
ul li:nth-child(5) {
  background-position: -240px 0;
}

<ul>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
</ul>