将单选按钮放在图像上

问题描述：

我试图在图像上的确切位置放置一些单选按钮.我已经将两者都放在了Div中，但是我不确定下一步该怎么做.这是我要放置单选按钮的地方(红色圆圈):

I am trying to place some radio buttons over an image at an exact location. I have placed both in a Div but I am not sure what to do next. Here is where I want the radio buttons to be placed (red circles):

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

Here is my code so far:

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

非常感谢您！

答

即使您说要在图像上显示它们，但在共享的图片中，单选按钮仍显示在图片的右侧.因此，我对您的实际需求感到困惑.

Even though you say you want them over your image, in the picture you shared the radio buttons appear to be on the right side of the image. So i am a bit confused about what you actually want.

但是我在下面做了一个简单的例子.您可以根据自己的喜好定位他们，也可以在下面发表评论.

But i made a simple example below. You can position them how you like or comment below if you want my help.

P.S.如我在评论中所说:< body>HTML5不支持bgcolor属性.改用CSS.

P.S. as i said in my comment : 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>

相关推荐