将两个图像合并为一个，并使用javascript隐藏溢出

我有两张不同部门的照片。就目前而言：

我想知道如果顶部图像超出背景图像的位置，是否可以合并到背景图像中。它应该只显示在背景图像区域。当它外出或超出边界时，它应该像溢出隐藏一样。

将“ship”PNG作为边界容器的子容器放置-将边界容器设置为溢出：隐藏，并根据需要在边界容器中移动船舶。每当“ship”png移动到边界容器的边缘之外时，它都会自动为您剪裁

从技术上讲，您不需要子div，只需将图像放在父div中即可，但将图像放在子div中将使您对图像有更多的控制

HTML

<div class="parent">
    <div class="child"><img src="path-to-your-image/ship.png" /></div>
</div>

---

嗨，哈桑，我们很乐意为您提供帮助，但您的描述有点不清楚您想要实现什么。请发布您迄今为止尝试过的代码，也许可以使用任何照片编辑器或线框工具模拟最终结果的视觉效果，以便我们知道最终结果应该是什么样子。如果没有这一点，您的问题可能会因为不够清晰而被标记或删除。让我们假设在DIV中，我有一个PNG图像空间飞船，而另一个是背景，如果飞船的位置在任何背景区域的中间，它必须是可见的，但是如果它是半个背景的，它就必须显示一半的一半，一半的东西消失在背景中。如果它完全不在背景中，它应该全部消失。将“ship”PNG作为边界容器的子容器放置-将边界容器设置为overflow:hidden，并根据需要在边界容器中移动船舶。任何时候“船”png移动到边界容器的边缘之外，它将自动为您剪裁。@Korgrue您能给我一些代码，比如如何设置边界的子级吗？在下面的回答中为您添加了代码示例。但是我希望边界到边界，比如png在形状上是不同的，而不是方形，它在整个div上溢出，我只是为了应用于图像png溢出隐藏或使用javascript。我知道溢出：hidden用于隐藏，但在png上不起作用。请确保png有一个透明的背景（这样后面就不会有白色框）。溢出隐藏将在任何div上工作-无论中的内容如何。它是CSS规范的一个基本部分。您移动到父div之外的PNG的任何部分都将被剪裁。如果没有发生这种情况，那么也向子级添加overflow:hidden（如果浏览器正确实现了规范，则不必这样做）。

.parent{
    width:500px;
    height:500px;
    overflow:hidden;
}