如何打破图像到9级小的（有点拼图）

于是，我尝试创建一个小的益智游戏，这在目前看起来是这样的如何打破图像到9级小的（有点拼图）

顶部是谜在那里你可以把从表中选择的片断从页面底部的1行（可滚动）

问题是这些是从原始的9个人的图像剪切。

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

为了简单起见，假设每一个表格单元格206px width124px height，所以大的图景是618px width和372px height（因为这是我在网上找到的是随机图像的大小）

我设置一个ID，每个td从底部表和尝试使用CSS精灵但无济于事。

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

预先感谢

来源

2017-04-10 Hansewl

[切削影像成碎片通过JavaScript]的可能的复制（http://stackoverflow.com/questions/8912917/cutting- an-image-into-pieces-through-javascript） –

来自Treasure Island的NC Wyeth插图。太好了！ –

也可能重复的http://stackoverflow.com/questions/39800704/mask-image-into-multiple-portions-without-loading-image-multiple-times/39801079 –

background-position使用

更新：由于@GCyrilluscomment（和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>

来源

2017-04-10 11:46:19 LGSon

谢谢，我会给它一个镜头。 – Hansewl

只要给我一个真正快速的提示。如果我使用精灵而不是9张图像，我该如何检查拼图是否解决？之前当我有9张图片时，我会将它们命名为1,2,3等，并且我会知道每个图片应该放在哪里，然后通过'src'属性进行检查。是可能的，而不是有一个表拼图本身有一个股利，并检查是否它的背景网址这是实际的形象？不知道这是否会起作用 – Hansewl

@Hansewl给每个data- *属性并检查....将在一秒内更新我的答案。 – LGSon

基于源图像的尺寸（如全），可以使用JavaScript来计算每片的顶部和左点。然后使用不同的分配固定大小的片的div和设置相同（源）的背景图像以它们中的每偏移这样的：

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

来源

2017-04-10 11:38:02 blami

如何打破图像到9级小的（有点拼图）

回答

相关问题