Question

我对网络前端不太熟悉。

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

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

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

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

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

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

非常感谢！

Answer 1

你可以用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>

Answer 2

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>

Answer 3

使用一个具有sprite图像的单独类的公共类

.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>

Answer 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

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

4 个答案: