Html 如何将重叠图像绑定到基础图像的特定部分？

后续行动

我希望有一个播放\暂停按钮，该按钮位于我的图像上，与基础图像的相同部分完全重叠。在我的例子中，这是企鹅左眼的中心。我的努力是：

函数playPause（）{
if（document.getElementById（'player'）.src.endsWith（'dQ39oPh.png'））{
document.getElementById（'player'）.src=”https://i.imgur.com/r4My4Ep.png";
}
否则{
document.getElementById（'player'）.src=”https://i.imgur.com/dQ39oPh.png";
}
}

body{
背景图像：url（'https://i.imgur.com/sWfZ8nq.png');
背景重复：重复；
保证金：0；
}
* {
框大小：边框框；
}
.fg{
显示：网格；
网格模板行：1fr自动；
保证金：自动；
高度：100vh；
}
.fg.text{
显示器：flex；
对齐项目：居中；
宽度：100%；
身高：100%；
}
.文本跨度{
宽度：100%；
颜色：白色；
文本对齐：居中；
字体大小：10vmin；
字母间距：3px；
文本阴影：2px 2px 2px绿色，
2px-2px 2px绿色，
-2件2件2件2件绿色，
-2px-2px 2px绿色；
}
.img#企鹅{
位置：相对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
最大高度：70vh；
最大宽度：90vw；
}
.img#播放器{
位置：绝对位置；
底部：52%；
左：48.7%；
转化：translateX（-48.7%）；
宽度：1.3vw；
}

HNY19