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

【问题标题】：Aligning content (image) used in radio button so that button wont show对齐单选按钮中使用的内容（图像），以便该按钮不会显示
【发布时间】：2014-07-13 23:37:09
【问题描述】：

我目前在一个表单中有两个单选按钮，我使用 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;
}

【问题讨论】：

您是否希望图像成为按钮的“标签”而不是看到它，而只看到图像？只看到button2？
使用text-align:center;
我基本上是想用图片来替换按钮，让它根据选择与否来改变不透明度。

标签： html forms css css-content

【解决方案1】：

我想知道这个FIDDLE 是不是你要找的。p>

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;
}

【讨论】：