gpt4 book ai didi

html - 在视频上叠加 HTML 单选按钮

转载 作者:太空宇宙 更新时间:2023-11-04 08:28:25 24 4
gpt4 key购买 nike

我想在视频顶部覆盖 HTML 单选按钮,以便您可以选择它们。如果有帮助,我知道每个彩色框的像素坐标。就像下面的例子一样,黑色圆圈代表我可以点击的单选按钮。如何使用 CSS 对其进行格式化? enter image description here

<style>
#container {
width: 428px;
height: 200px;
position: relative;
}

#overlay {
width: 100%;
height: 100%;
position: absolute;
top: 50px;
left: 50px;
color: red;
font-size: 40px;
z-index: 10;
}

#base {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="overlay">
<form action="">
<input type="radio" name="white" value="1" />
<input type="radio" name="white" value="2" />
<input type="radio" name="white" value="3" />
<input type="radio" name="white" value="4" />
<input type="button" id="continue" value="Continue"/>
</form>
</div>
<div id="base">
<video controls>
<source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</body>

最佳答案

我最好的选择是让单选按钮位于 position: absolute 并使用 top:right: 将它们移动到视频上方>.

JSfiddle demo

关于html - 在视频上叠加 HTML 单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44974627/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com