Question

我想在视频顶部覆盖 HTML单选按钮，以便您可以选择它们。如果有帮助，我知道每个彩色框的像素坐标。如下例所示，黑色圆圈代表我可以点击的单选按钮。如何使用CSS格式化它？

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

Answer 1

我最好的选择就是在position: absolute中设置单选按钮，并使用top:和right:将其移到视频上。

JSfiddle demo

在视频

1 个答案: