javascript - 在 html 中的按钮上定位图像/对象

Question

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

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

我该如何处理？

Answer 1

通过下面的例子你可以解决以下问题:

1. 在比按钮大的按钮上显示图像
2. 让用户通过图片点击按钮

<div style="position:relative;">
  <button onclick="alert('Hello');" style="position:absolute;top:30px;">Place image on me</button>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/252px-Red_star.svg.png" style="position:absolute;height:60px;left:40px;pointer-events:none;" />
</div>

您仍然需要根据需要采用样式，因为出于演示目的，所有样式都使用固定像素值定位。