在 img type="button" 上添加文本答案

【问题标题】：Add text on img type="button"在 img type="button" 上添加文本
【发布时间】：2021-11-17 11:29:25
【问题描述】：

我有这样的按钮

<img type="button" src="ans.png">

但我想在这个按钮上放文字。

但是，value="" 不起作用。

看起来很简单的问题，但我找不到正确的答案。

感谢您的帮助？？

【问题讨论】：

你能用javascript或者jquery吗？
这能回答你的问题吗？ HTML: How to make a submit button with text + image in it?

标签： html css

【解决方案1】：

<img /> 标签用于在 HTML 文档中嵌入图像。它没有任何type 或value 属性。

如果你想在按钮上显示背景图片，试试这个：

HTML

<button class="image_buttton">button text</button>

CSS

button{
    width: 200px;
    height: 300px;
    background: url(https://picsum.photos/200/300);
 }

【讨论】：

【解决方案2】：

您不能使用<img type=button> 制作图像按钮。但您可以制作<button> 并提供来自css 的背景图片

button{
  background: url("https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 10px;
}

&lt;button&gt;Button&lt;/button&gt;

【讨论】：

它对我很有效，感谢您添加 background-*** 示例。

【解决方案3】：

.image_buttton {
  position:relative;
  padding: 5px 10px;
  border: 1px solid black;
  min-width:100px;
  height: 35px // as the image height;
}
.image_buttton .img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1
}
.image_buttton .img img {
  width:100%;
  height:100%;
}
.image_buttton .text {
  position: relative;
  z-index:10;
  color: red;
}

<button class="image_buttton">
  <span class="text">button text</span>
  <span class="img">
    <img src="https://picsum.photos/200/300">
  </span>
</button>

【讨论】：

【解决方案4】：

img 标签没有 type 属性。 - 见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

如果你想在按钮上放一张图片，你可能有一个按钮标签，里面有一个 img 标签：

&lt;button id="close-image"&gt;&lt;img src="http://example.com/path/to/image.png"&gt;&lt;/button&gt;

或者像这样的图像类型的输入：

&lt;input type="image" src="http://example.com/path/to/image.png" /&gt;

【讨论】：