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

Question

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

顶部是拼图，您可以在其中放置从 table 从页面底部算起 1 行（可滚动）的拼图

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

我只想要一张图片（大的），然后将它们放在底部 table 中，方法与上图类似 post。

为简单起见，假设每个 table 单元格是 206px width 124px height，所以大图是 618px width 和 372px height（因为这是大小我在网上找到的那张随机图片）

我已经为底部 table 的每个 td 设置了一个 id，并尝试使用 css 精灵但无济于事。

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

提前致谢

Answer 1

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

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

Answer 2

使用background-position

更新：感谢 @GCyrillus (and code sample)，它现在可以扩展了）

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>

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

How to break an image into 9 small ones (sort of puzzle pieces)

html

javascript

css

sprite