来自一个图像的多个图像答案

【问题标题】：Multiple Images coming from one image来自一个图像的多个图像
【发布时间】：2016-11-02 17:45:37
【问题描述】：

我正在设计一个网页，并希望使用 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负载。

【问题讨论】：

不清楚您所说的“希望来自一个图像的多个图像”是什么意思。是不是你有某种类型的精灵表？
Stackoverflow 不是代码编写服务...您至少必须尝试自己解决这个问题。
欢迎来到 Stack Overflow！请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
到目前为止您尝试过什么？这不是“为我做这件事”的网站..stackoverflow.com/help/how-to-ask

标签： javascript jquery html css

【解决方案1】：

正如其他人所建议的那样，我们认为您是在询问精灵表。既然您知道了一个更常见的术语，那么您可以尝试一些搜索后可能会是什么。这个网站上有很多 CSS sprite 问题：

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>

【讨论】：