如何将图像分成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屋!