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

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

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

我不知道是否有从这个大局就像加载一个部件一个简单的方法：

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

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

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

非常感谢！

来源

2016-09-15 Benny Ae

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>

来源

2016-09-15 05:12:02

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

请参阅您的HTML工作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; 
}

使用如下：

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

来源

2016-09-15 05:05:06 Shiham

使用带有精灵形象单独的类一个通用类

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

来源

2016-09-15 05:10:53

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

您如何使用它：

<!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>标签使用的图像是1 x 1像素（空白）图像，因此您可以清楚地看到图像，否则原始图像重叠在上面。这可以使用<div>另外，如果你不想使用<img>

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

来源

2016-09-15 05:17:07 Shaggy

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

回答

相关问题