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

Question

我有两个不同div的图像。就像现在这样：

我想知道顶部图像是否可以在背景图像中合并，如果它超出背景图像的位置。它应该只显示在背景图像区域。当它熄灭或者它离开它的边界时，它必须是溢出的，如。

Answer 1

放置＆＃34;发货＆＃34; PNG作为边界容器的子项 - 将边界容器设置为overflow：hidden，并根据需要在边界容器中移动船只。任何时候发货＆＃34;发货＆＃34; png移动到边界容器的边缘之外，它会自动为你剪裁。

从技术上讲，你不需要子div，你只需将图像放在父div中 - 但是将图像放在子div中可以让你更好地控制图像。

<强> HTML

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

<强> CSS

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