html - 将文字置于图像之上

Question

我有图像代替单选按钮输入。我想直接在这些图像上写文字，但我找不到实现此目的的简单方法。

我还需要在用作链接的图像之上进行书写，因此理想情况下最好采用一种在这两种情况下都适用的方式。

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

Answer 1

你有没有想过使用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>