如何将图像分解成9个小图(某种拼图)

Question

所以，我试着制作了一个小的益智游戏，这个游戏现在看起来像这样

​

​

顶部是一个拼图，您可以在其中放置从页面底部有1行(可滚动)的表中选择的部分。

问题是，这是9个单独的图像，从原来的一个。

我只想有一个图片(大的)，并让他们以类似的方式放在底部的表格，在上面的图片在这篇文章。

为了简单起见，假设每个表单元格都是206px width 124px height，所以大图是618px width和372px height (因为这是我在网上发现的随机图像的大小)。

我已经从底部的表中为每个td设置了一个id，并尝试使用css，但没有成功。

我很确定我必须使用雪碧，我只是不能让它发挥作用。另外，当我使用background: url()...时，它会自动调整单元格的大小，即使它们有固定的大小。

提前感谢

Answer 1

使用background-position

更新:由于@gcyrillushttps://stackoverflow.com/questions/43322063/how-to-break-an-image-into-9-small-ones-sort-of-puzzle-pieces/43322326?noredirect=1#comment73713025_43322326(和http://codepen.io/gc-nomade/pen/gmVKra)，它现在是可伸缩的)

​

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%;
}

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

​

置乱

​

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%;
}

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

​

Answer 2

根据源图像的大小(作为整体)，您可以使用javascript来计算每个片段的顶部和左端。然后分配固定大小的片div，并将相同(源)背景图像设置到每一个具有不同偏移量的背景图像，如下所示：

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