隐藏图像的多余部分在前面的图像之外

Question

这是两个图像，一个是乌龟，另一个是前面没有那么圆的东西，我想隐藏未被那个不太圆的东西触摸过的部分，我该怎么做？这些图像都是.PNG文件。

<div style="position: relative;">
    <img src="/assets/img/tutle.jpg" class="img" style="position: absolute;" />
    <img src="/assets/img/round.png" class="img" style="position: relative;"/>
</div>

附加：我还将制作round.png动画（旋转）。

Answer 1

您可以使用css mask属性：https://developer.mozilla.org/en-US/docs/Web/CSS/mask