如何将图像分成9个小图片（有点拼图）

Question

所以，我尝试创建一个小小的益智游戏，目前看起来像这样

顶部是拼图，您可以从页面底部放置从1行（可滚动）的表中选择的部分

问题是那些是从原始图像切割的9个单独图像。

我想只有一张图片（大图片）并将它们放入底部表格，其方式与本文上图中的内容类似。

为简单起见，假设每个表格单元格为206px width 124px height，因此大图为618px width和372px height（因为这是我找到的随机图像的大小在线）

我已经从底部表格为每个td设置了一个ID，并尝试使用css sprite，但无济于事。

我很确定我必须使用sprite，我似乎无法使它工作。另外，当我使用background: url()...时，它会自动调整单元格的大小，即使它们具有固定的大小。

提前致谢

Answer 1

根据源图像的大小（整体），您可以使用javascript计算每个部分的顶部和左侧点。然后分配固定大小的片段div并将相同（源）背景图像设置为具有不同偏移量的每个像这样：

.piece-1 {
   background-image: url("...");
   background-position: right <CALCULATED RIGHT>px top <CALCULATED TOP>px;
}

Answer 2

使用background-position

更新：感谢 @GCyrillus comment（和code sample），现在可扩展了） < / p>

＆＃13;

＆＃13;

html, body {
  margin: 0;
}
.puzzle {
  width: 100vh;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.puzzle > div {
  width: 33.333%;
  height: 33.333%;
  background: red;
  border: 1px solid white;
  box-sizing: border-box;
  background: url(http://lorempixel.com/600/600/nature/1/) no-repeat;
  background-size: 300%;
}
.puzzle > div[data-piece1] {
  background-position: 0 0;
}
.puzzle > div[data-piece2] {
  background-position: 50% 0;
}
.puzzle > div[data-piece3] {
  background-position: 100% 0;
}

.puzzle > div[data-piece4] {
  background-position: 0 50%;
}
.puzzle > div[data-piece5] {
  background-position: 50% 50%;
}
.puzzle > div[data-piece6] {
  background-position: 100% 50%;
}

.puzzle > div[data-piece7] {
  background-position: 0 100%;
}
.puzzle > div[data-piece8] {
  background-position: 50% 100%;
}
.puzzle > div[data-piece9] {
  background-position: 100% 100%;
}

＆＃13;

<div class="puzzle">
  <div data-piece1></div>
  <div data-piece2></div>
  <div data-piece3></div>
  <div data-piece4></div>
  <div data-piece5></div>
  <div data-piece6></div>
  <div data-piece7></div>
  <div data-piece8></div>
  <div data-piece9></div>
</div>

＆＃13;

＆＃13;

＆＃13;

加扰

＆＃13;

＆＃13;

html, body {
  margin: 0;
}
.puzzle {
  width: 100vh;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.puzzle > div {
  width: 33.333%;
  height: 33.333%;
  background: red;
  border: 1px solid white;
  box-sizing: border-box;
  background: url(http://lorempixel.com/600/600/nature/1/) no-repeat;
  background-size: 300%;
}
.puzzle > div[data-piece1] {
  background-position: 0 0;
}
.puzzle > div[data-piece2] {
  background-position: 50% 0;
}
.puzzle > div[data-piece3] {
  background-position: 100% 0;
}

.puzzle > div[data-piece4] {
  background-position: 0 50%;
}
.puzzle > div[data-piece5] {
  background-position: 50% 50%;
}
.puzzle > div[data-piece6] {
  background-position: 100% 50%;
}

.puzzle > div[data-piece7] {
  background-position: 0 100%;
}
.puzzle > div[data-piece8] {
  background-position: 50% 100%;
}
.puzzle > div[data-piece9] {
  background-position: 100% 100%;
}

＆＃13;

<div class="puzzle">
  <div data-piece1></div>
  <div data-piece4></div>
  <div data-piece6></div>
  <div data-piece5></div>
  <div data-piece7></div>
  <div data-piece9></div>
  <div data-piece3></div>
  <div data-piece8></div>
  <div data-piece2></div>
</div>

＆＃13;

＆＃13;

＆＃13;