Question

我无法写完，我试过几种方式，但它仍然无效，我该怎么做？我认为这是不同的，因为它是 <input type="image"> 而不是 <img> ！ 我希望将文字放在底部的图片上

.centered {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

<div class="centered ">Example
  <input type="image" id="MY_ID" src="img.png" class="btTxt submit " width="100" height="130" />
</div>

Answer 1

请勿尝试在输入上放置图像，使用包装div并将图像添加到该输入中。

HTML

<div class="inputbutton">
  <span class="text">Hello World!</span>
  <input type="submit" class="btTxt submit" name="" value="">
</div>

CSS

div.inputbutton {
  position: relative;
  display: inline-block;
}

div.inputbutton input {
  background: url('http://placehold.it/200x100') no-repeat;
  cursor: pointer;
  width: 200px;
  height: 100px;
  border: none;
}

span.text {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

的jsfiddle： https://jsfiddle.net/msyhoaak/18/

如何在<input type =“image”/>元素上放置文本？

1 个答案: