在图像上放置单选按钮答案

【问题标题】：Place Radio Buttons over image在图像上放置单选按钮
【发布时间】：2019-01-17 21:15:45
【问题描述】：

我正在尝试在图像上的确切位置放置一些单选按钮。我已将两者都放在一个 Div 中，但我不确定下一步该做什么。这是我希望放置单选按钮的位置（红色圆圈）：

到目前为止，这是我的代码：

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

body {
  background-color: #979797
}

<div class="general">
  <img src="https://via.placeholder.com/300" class="center">
  <form action="">
    <input type="radio" name="answer 1" value="apple">
    <input type="radio" name="answer 2" value="chicken">
    <input type="radio" name="answer 3" value="carrot">
  </form>
</div>

非常感谢您！

【问题讨论】：

只有一张图片？？
The <body> bgcolor attribute is not supported in HTML5. Use CSS instead. 从您提供的图片中我无法理解任何内容。请更具体地了解单选按钮的位置。同时我会编辑你的代码

标签： html css

【解决方案1】：

我会将单选按钮分别放在一个 div 中，然后给 div 一个背景。像这样：

<html>
<head>
	<style>
		.general{}
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
    .radio-size {
      height: 100px;
      width: 100px;
    }
    .bg-apple {
      background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
    }
    .bg-chicken {
      background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
    }
    .bg-carrot {
      background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
    }
    
	</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body bgcolor="#979797">
	
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
	

  <form action="" style="background-img:url("")">
    <div class="radio-size bg-apple">
      <input type="radio" name="answer 1" value="apple">
    </div>
    <div class="radio-size bg-chicken">
      <input type="radio" name="answer 1" value="chicken"> <br>
    </div>
    <div class="radio-size bg-carrot">
      <input type="radio" name="answer 1" value="carrot"> 
    </div>
  </form>
</div>
	

</body>
</html>

注意：单选按钮都应该具有相同的“名称”属性，因此您只能选择其中一个。如果您希望能够选择多个选项，则应使用复选框。

【讨论】：

【解决方案2】：

即使您说希望它们覆盖您的图片，但在您分享的图片中，单选按钮似乎位于图片的右侧。所以我对你真正想要的东西有点困惑。

但我在下面做了一个简单的例子。如果您需要我的帮助，您可以将它们放在您喜欢的位置或在下方发表评论。

附：正如我在评论中所说：The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

body {
  background-color: #979797
}

form {
  position:absolute;
  right: 25%;
  top: 50%;
  transform:translateY(-50%) translateX(100%);
  display: flex;
  flex-direction: column;
}

.general {
  position: relative;
}

<div class="general">
  <img src="http://via.placeholder.com/640x360" class="center">
  <form action="">
    <input type="radio" name="answer 1" value="apple">
    <input type="radio" name="answer 2" value="chicken">
    <input type="radio" name="answer 3" value="carrot">
  </form>
</div>

【讨论】：

【解决方案3】：

您可以使用 flexbox 使用以下解决方案：

body {
  background:#979797;
}
.question {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
}
.answers {
  display:flex;
  flex-direction:column;
}
label.answer {
  position:relative;
  height:100px;
}
label.answer input[type="radio"] {
  top:0;
  left:0;
  position:absolute;
}

<form action="">
  <h2>Question 1:</h2>
  <div class="question">
    <img src="https://picsum.photos/300">
    <div class="answers">
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer1" value="apple">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer1" value="chicken">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer1" value="carrot"> 
      </label>
    </div>
  </div>
  <h2>Question 2:</h2>
  <div class="question">
    <img src="https://picsum.photos/300">
    <div class="answers">
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer2" value="apple">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer2" value="chicken">
      </label>
      <label class="answer">
        <img src="https://picsum.photos/100">
        <input type="radio" name="answer2" value="carrot"> 
      </label>
    </div>
  </div>
</form>

【讨论】：

【解决方案4】：

我认为您应该为上述查询尝试以下类型的代码。我已经改变了你的 HTML 结构并完全改变了你当前的 CSS：

.general{
  width: fit-content;
}
.img{
  display: flex;
  align-items: end;
}
img{
  border: 1px solid black;
}
body {
  background-color: #979797
}
.options{
  display: flex;
  flex-direction: column;
}
.radio{
  position: relative;
  height: 50px;
}
input[type="radio"]{
  position: absolute;
  top: calc(50% - 4px);
  right: 0;
  margin: 0;
}

<div class="general">
  <form action="">
    <div class="img">
      <img src="https://via.placeholder.com/150" class="center">
      <div class="options" class="center">
        <div class="radio">
          <img src="https://via.placeholder.com/50">
          <input type="radio" name="answer1" value="apple">
        </div>
        <div class="radio">
          <img src="https://via.placeholder.com/50">
          <input type="radio" name="answer1" value="chicken">
        </div>
        <div class="radio">
          <img src="https://via.placeholder.com/50">
          <input type="radio" name="answer1" value="carrot">
        </div>
      </div>
    </div>
  </form>
</div>

记住如果问题只有一个答案，那么单选框的名称应该相同，值应该不同。否则，所有单选按钮将同时被选中，并且无法取消选中。

我希望此代码对您有所帮助。谢谢。

【讨论】：