将图片作为单选按钮：如何把CSS中的图片src移至HTML？

哈哈，这个问题我之前也踩过坑！原生单选按钮的样式被浏览器锁得很死，直接给<input>加background-image根本不生效——因为浏览器对表单控件的默认渲染逻辑特殊，咱们得换个方式，把图片和单选按钮的交互逻辑分开处理。下面给你两个靠谱的方案，都能把图片路径直接写在HTML里：

方案1：用<label>包裹图片+隐藏原生单选按钮 #

这是最直观的实现方式，利用<label>和单选按钮的关联特性（点击label等同于点击对应input），把原生单选按钮隐藏，用图片作为点击交互的载体。

HTML代码（图片路径直接写在<img>标签里） #

<div class="image-radio-group">
  <!-- 选项1 -->
  <input type="radio" name="image-choice" id="choice-1" value="cat">
  <label for="choice-1">
    <img src="./images/cat.jpg" alt="可爱猫咪" class="radio-img">
  </label>

  <!-- 选项2 -->
  <input type="radio" name="image-choice" id="choice-2" value="dog">
  <label for="choice-2">
    <img src="./images/dog.jpg" alt="调皮小狗" class="radio-img">
  </label>
</div>

CSS代码（处理选中状态样式） #

/* 完全隐藏原生单选按钮，但保留点击交互 */
.image-radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 默认状态的图片样式 */
.radio-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin: 0 10px;
}

/* 选中时的图片样式（比如加高亮边框） */
.image-radio-group input[type="radio"]:checked + label .radio-img {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.4);
}

方案2：用HTML data-*属性存图片路径+CSS伪元素渲染 #

如果不想用<img>标签，想通过背景图实现，可以给容器加自定义data-*属性存储图片路径，再用CSS伪元素读取这个属性来渲染背景图。

HTML代码（图片路径写在data-img属性里） #

<div class="image-radio-group">
  <!-- 选项1 -->
  <div class="radio-item" data-img="./images/cat.jpg">
    <input type="radio" name="image-choice" id="opt-1" value="cat">
    <label for="opt-1"></label>
  </div>

  <!-- 选项2 -->
  <div class="radio-item" data-img="./images/dog.jpg">
    <input type="radio" name="image-choice" id="opt-2" value="dog">
    <label for="opt-2"></label>
  </div>
</div>

CSS代码（读取data属性渲染背景图） #

.radio-item {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 10px;
}

/* 隐藏原生单选按钮，但让它能接收点击 */
.radio-item input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* 用label的伪元素渲染背景图，读取父元素的data-img属性 */
.radio-item label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: attr(data-img url);
  background-size: cover;
  background-position: center;
  border: 3px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* 选中状态的样式 */
.radio-item input[type="radio"]:checked + label::before {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.4);
}

两个方案各有优势：方案1适合需要<img>标签的场景（比如需要alt文本优化SEO），方案2适合用背景图精确控制显示效果的需求，都能完美实现“图片作为单选按钮”且图片路径直接写在HTML里的目标。

内容的提问来源于stack exchange，提问作者slickness