如何从图标集合图片中加载一个图标答案

【问题标题】：how to load one icon from a icon collection picture如何从图标集合图片中加载一个图标
【发布时间】：2017-01-22 23:50:50
【问题描述】：

我对网络前端不是很熟悉。

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

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

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

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

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

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

非常感谢！

【问题讨论】：

标签： html css asp.net icons styles

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用 CSS 类来做到这一点。这是一种称为 CSS sprites 的优化技术。查看更多here和here

查看工作Fiddle

.first-icon {
    width: 60px;
    height: 60px;
    background: url('http://i.stack.imgur.com/3fmAx.png') 0 0;
}

.second-icon {
    width: 60px;
    height: 60px;
    background: url('http://i.stack.imgur.com/3fmAx.png') 65px 0;
}

.third-icon {
    width: 60px;
    height: 60px;
    background: url('http://i.stack.imgur.com/3fmAx.png') 125px 0;
}

在你的 HTML 中使用如下：

<div class="first-icon"></div>
<div class="second-icon"></div>
<div class="third-icon"></div>

【讨论】：

【解决方案3】：

使用一个通用类和一个单独的类与精灵图像

.icon{height:30px; float:left; margin-left:10px; width:30px; background:url("icon.jpg") no-repeat;}
.icon.home{background-position:0 0;}
.icon.services{background-position:-40px 0;}
.icon.product{background-position:-80px 0;}
.icon.about{background-position:-120px 0;}

<div class="icon home"></div>
<div class="icon services"></div>
<div class="icon product"></div>
<div class="icon about"></div>

【讨论】：

【解决方案4】：

设计师给出的图像称为图像精灵。
图像精灵是放入单个图像的图像集合。
使用图像精灵将减少服务器请求的数量并节省带宽。

现在你可以如何使用它：

<!DOCTYPE html>
<html>
<head>
<style>
#home {
    width: 65px;
    height: 60px;
    background-image: url("http://i.stack.imgur.com/3fmAx.png");
    background-position: 0 0;
}

#next {
    width: 60px;
    height: 60px;
    background-image: url("http://i.stack.imgur.com/3fmAx.png");
    background-position: 65px 0;
}
</style>
</head>
<body>

<img id="home" src="http://www.w3schools.com/css/img_trans.gif"><br><br>
<img id="next" src="http://www.w3schools.com/css/img_trans.gif">

</body>
</html>

注意：在<img> 标签中，使用的图像是 1px X 1px（空白）图像，因此您可以看到图像清晰，否则原始图像重叠在其上。这个可以也可以使用<div> 完成，如果您不想使用<img>

这里是参考：http://www.w3schools.com/css/css_image_sprites.asp

【讨论】：