html - 将文字放在图片上方

我有代替单选按钮输入的图像。我试图直接在这些图像上书写文本，但是我找不到一种简单的方法来实现此目的。

我还需要在用作链接的图像上书写，因此理想情况下，最好在两种情况下都可以使用的方法。

#selector {
  width: 5vw;
  vertical-align: middle;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + image {
border: 2px solid green;
}

<label>
  <input type="radio" name="amount" value="100" checked />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">100</label>
<label>
  <input type="radio" name="amount" value="250" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">250</label>
<label>
  <input type="radio" name="amount" value="500" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">500</label>
<label>
  <input type="radio" name="amount" value="1000" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">1000</label>
<label>
  <input type="radio" name="amount" value="1500" />
  <img id="selector" src="http://s8.postimg.org/k4wy7buc1/selector.png">1500</label>

最佳答案

您是否考虑过使用background-image？

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  outline: 2px solid green;
}
label {
  background-image: url('http://s8.postimg.org/k4wy7buc1/selector.png');
  display: inline-block;
  background-size: 40px 20px;
  width: 40px;
  height: 20px;
}

<input id="rb1" type="radio" name="amount" value="100" checked />
<label for="rb1">100</label>
<input id="rb2" type="radio" name="amount" value="250" />
<label for="rb2">250</label>
<input id="rb3" type="radio" name="amount" value="500" />
<label for="rb3">500</label>
<input id="rb4" type="radio" name="amount" value="1000" />
<label for="rb4">1000</label>
<input id="rb5" type="radio" name="amount" value="1500" />
<label for="rb5">1500</label>

关于html - 将文字放在图片上方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35486283/