javascript - 将两个图像合并为一个并用javascript overflow hidden

Question

我在不同的 div 中有两张图片。现在像这样:

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

Answer 1

将“ship”PNG 放置为边界容器的子级 - 将边界容器设置为溢出:隐藏，并根据需要在边界容器中四处移动船。只要“船”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;
}