html - 对齐单选按钮中使用的内容（图像），以便该按钮不会显示

Question

我目前在一个表单中有两个单选按钮，我使用 CSS 属性内容为每个按钮插入一个图像，并且在选择或不选择时会改变不透明度。原始单选按钮仍显示在图像的左侧。有什么方法可以移动图像，使其位于原始单选按钮的中心？

#button1,
#button2 {
   height: 150px;
   width: 150px;
   margin-left: 10%;
   margin-right: 10%;
}

#button1 {
   content: url(../assets/logo.gif);
   opacity: .4;
   -webkit-transition-duration: 1.5s;
}

Answer 1

我想知道这个FIDDLE是否是您正在寻找的。

HTML

<label class="mickey" for="button1">
      <input id="button1" type="radio" name="testme" />
      <img src='http://i.imgur.com/Q7IJUNJ.png?1' alt='' />
</label>

<label class="mickey" for="button2">
      <input id="button2" type="radio" name="testme" />
      <img src='http://i.imgur.com/73kXZTR.jpg' alt='' />
</label>

CSS

#button1, #button2 {
    display: none;
}
input[type=radio] + img{
  cursor:pointer;
  border: 2px solid blue;
  opacity: 0.5;
}
input[type=radio]:checked + img {
  border: 2px solid red;
  opacity: 1.0;
}
img {
    height: 100px;
    width: 100px;
}