Question

我有一个被切成不同部分的图像。假设一个物理切割成拼图形状的图像。

仅使用HTML和CSS，我如何对齐拼图的所有部分，使其在组装后看起来像单个图像？

我有实际的单独作品，不使用像图像或精灵这样的东西。

编辑：这个问题不是一个真正的难题，而是略有不同。我想要改变一件或多件的能力，而不影响整体的外观。

编辑问题：问题的另一个问题是，一些图像可能有超过1个“碎片”，中间有空白。所以，例如，

ABCD
EFGH
IJKL
MNOP

是原始图像，每个字母作为单独的部分。它可能是
A C
摹
是1件，其他地方有空白/透明，甚至不是完整的。

含义：
0 C 0
00G0
0000
0000

其中0是空白处。

上图不存在。它将是

A0C
00G

仅

所以基本上我们正在考虑覆盖。默认片段的原始定位将具有最低z-index的图像，以便将显示的每个片段具有更高的索引。

很抱歉问题听起来如此复杂。

Answer 1

将position:relative 分配给父div ，将position:absolute 分配给图片。

然后使用顶部，左侧，底部和右侧属性进行放置。

将height和width添加到父div ;它应该等于或大于组合图像片段的尺寸。

以下是演示

.wrapper{ float:left; position:relative; width:400px; height:400;}

.img-1{position:absolute; top:0; left:0; width:200px; height:100px; background:#888;}
.img-2{position:absolute; top:0; left:200px; width:200px; height:200px; background:#666;}
.img-3{position:absolute; top:100px; left:0; width:150px; height:100px; background:#333;}

<div class="wrapper">
  <div class="img-1">img1</div>
  <div class="img-2">img2</div>
  <div class="img-3">img3</div><!-- you have to put img tag here -->
</div>

互相接触的不同形状的图像

1 个答案: