Javascript 将图像/对象放置在html中的按钮上

是否可以将对象/图像放置在html中的按钮上？见下图。其想法是将对象放置在按钮上方，但仍然使按钮完全可操作

<button type="button" class="button">Place image on me</button>

将图像放在我身上

我将如何处理此问题？

将图像放在我身上
<button type="button" class="button">Place image on me<img src="your-image.png"></button>

您可以通过以下操作将图像添加到按钮本身：

<button type="button" class="button"><img src="#"/></button>

---

但是如果你想用css来覆盖这个按钮，它就不起作用了。

你可以像这样直接在按钮中使用图像

<button type="button" class="button">Place image on me <img src="#"/></button>

---

通过以下示例，您可以解决以下问题：

在比按钮大的按钮上显示图像

让用户通过图像单击按钮

把图像放在我身上

您为什么要这样做？你尝试过什么？在文本为.Lonut的地方添加img标签，在我的html上创建简单的游戏应用程序。用斯潘哈明德试过。非常感谢。问题是，图像会调整按钮的大小。我希望看到按钮大小保持不变，但图片会超过按钮大小。可能的重复显示使用CSS。对于这个例子，它将在图像上使用。谢谢回复。问题是，按钮的大小随图像而变化，这是我不想看到的。这完全取决于你想实现什么，也许这会有所帮助

.button {
    position:relative;
}
.button:before {
    content:"";
    display:block;
    background:url('img.png') no-repeat;
    width:100px;
    height:100px;
    position:absolute;
}