将单选按钮放在图像上 [英] Place Radio Buttons over image
问题描述
我试图在图像上的确切位置放置一些单选按钮.我已经将两者都放在了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>这篇关于将单选按钮放在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
