如何将图像分成9个小图像（有点拼图） [英] How to break an image into 9 small ones (sort of puzzle pieces)

问题描述

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

So, I tried creating a little puzzle game, which at the moment looks something like this

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

The top is the puzzle where you can put pieces that are chosen from a table with 1 row (scrollable) from the bottom of the page

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

Problem is those are 9 individual images cut from the original one.

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

I want to have only one image (the big one) and have them put into the bottom table in a similar manner to what's in the picture above in this post.

为简单起见，假设每个表格单元格 206px宽度 124px height ，所以大图是 618px宽度和 372px高度（因为那是随机图像的大小我在网上找到了）

For simplicity sake, assume every table cell is 206px width 124px height, so the big picture is 618px width and 372px height (because that's the size of that random image I found online)

我从底部表中为每个 td 设置了一个id并尝试使用css sprite但无济于事。

I've set an id to each td from the bottom table and tried using css sprite but to no avail.

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

I'm pretty sure I have to use sprite tho, I just can't seem to make it work. Plus, when I use background: url()... it automatically resizes the cells even tho they have a fixed size.

提前致谢

推荐答案

使用 background-position

更新：感谢 @GCyrillus comment （和代码示例），现在可以扩展）

Updated: Thanks to @GCyrillus comment (and code sample), it is now scalable)

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个小图像（有点拼图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！