在html中的按钮上定位图像/对象答案

【问题标题】：position image/object on button in html在html中的按钮上定位图像/对象
【发布时间】：2017-04-12 19:51:25
【问题描述】：

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

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

我该如何处理？

【问题讨论】：

你为什么要做这样的事情？你试过什么？
在文本所在的地方添加img标签。
Lonut，只是在我的 html 上创建简单的游戏应用程序。尝试使用跨度
危害者。谢谢你。问题是，图像调整了按钮的大小。我希望看到按钮大小保持不变，但图像会超过按钮大小。
HTML/CSS: Make a div “invisible” to clicks? 的可能副本，它演示了使用 CSS pointer-events: none。在本例中，它将用于图像。

标签： javascript jquery css html

【解决方案1】：

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

在大于按钮的按钮上显示图像
让用户通过图片点击按钮

<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>

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

【讨论】：

【解决方案2】：

<button type="button" class="button">Place image on me<img src="your-image.png"></button>

【讨论】：

【解决方案3】：

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

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

但是如果你要用图片用css覆盖按钮就不行了。

【讨论】：

感谢您的回复。问题是因为按钮会根据图像调整大小，我不想看到。
这完全取决于您要达到的目标，也许这会有所帮助stackoverflow.com/questions/796087/make-a-div-into-a-link

【解决方案4】：

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

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

如果您不想在按钮内使用任何 html 标记且不使用图像调整按钮大小，请使用 css。

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

【讨论】：