Question

不久前我确实问了一个类似的问题，但我发现了一些关于这个主题的新信息，我认为我现在可以解释一下。

我有两个拼图，两个都是透明的.pngs（除了实际的部分）：

To see these pieces, here's a link:

这是我现在用来展示我的两件作品的代码 -

<body>
<div align="center">
    <table border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td>
                <img src="http://i.imgur.com/UPYw2i4.png">
            </td>
            <td>
                <img src="http://i.imgur.com/7rkQ0hz.png">
            </td>
        </tr>
    </table>
</div>

图像彼此相邻，但不像他们应该那样互锁。我知道这应该发生，因为谁想要重叠图片。所以我的问题是，我如何让它们重叠？

这个拼图不是要构建的，它意味着要预先构建，并且如果有意义的话，使用不透明度在不同时间出现碎片。

任何方向都会很棒，因为我对此很陌生（尽管有一个爆炸式的学习）。

Answer 1

我能够通过一些CSS Magic

产生所需的结果

<body>
<div align="center">
    <table border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td>
                <img src="http://i.imgur.com/UPYw2i4.png">
            </td>
            <td>
                <img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
            </td>
        </tr>
    </table>
</div>
</body>

CSS

.merge
{
    position:relative;
    right:92px;
    top:4px;
}

Answer 2

您无法使用表格集执行此操作。列不会正确重叠。即使您可以将其关闭，也无法在所有浏览器中使用它。

您可以使用DIV和CSS轻松完成此操作。在那里，您可以完全控制放置。

Answer 3

这是一个＆＃34;爱好者＆＃34;的例子。使用Jquery UI可拖动小部件的解决方案：

http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview

HTML

<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>

JS

//js
$(function(){
  $( ".draggable" ).draggable();
});

这允许您使用鼠标抓取并移动每个部分。不得不使用plnkr ...因为和你一样，我无法弄清楚如何保存JSFiddle。

如何将两张图片拼接在一起

3 个答案: