如何從圖標集合圖片加載一個圖標

網頁設計師給了我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

如何從圖標集合圖片加載一個圖標

回答

相關問題