来自一个图像的多个图像

Question

我正在设计一个网页，并希望使用Javascript，CSS或Jquery从一个图像中获取多个图像。

<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >

我是javascript的新手，所以很难解决它 main.png是主要图片，我希望submain1.png, submain2.png, submain3.png图片在页面加载后一个接一个地来自main.png。

Answer 1

正如其他人所说，我们认为你在询问精灵表。现在你知道了一个更常见的术语，你可以尝试一些搜索。这个网站上有很多CSS精灵问题：

CSS Sprite Issues On StackOverflow

这是一个快速演示：

#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }

.iconback {
  border: solid 1px;
  background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}

.window { width: 80px; height: 80px; margin: 1em; }

<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>