Question

我试图在图像上的确切位置放置一些单选按钮。我已经将两者都放在了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>

非常感谢您！

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

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

Answer 2

您可以通过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>

Answer 3

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

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

P.S。正如我在评论中所说的：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>

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

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

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

将单选按钮放在图像上

4 个答案: