Question

我想要一个图像放在HTML 5中的视频之上。目前我只是使用CSS定位强制图像到位，但我无法弄清楚如果页面变小或如何使其保持原位变化很大。

如何将图像和视频绑在一起？

这是代码

<style>
<!--
.container{
    position: relative;
}
.vidContainer faceVideo{
    position: relative;
    z-index: 0;
}
.overlay {
    position: absolute;
    top: 193px;
    left: 42px;
    z-index: 1;
}
-->
</style>
...
<div class="container">
    <div class="vidContainer">
        <video id="faceVideo" autoplay="autoplay" width="500px"
    height="375px" style="border-style: solid; border-color: black; border-width: medium;"></video>
        <div class="overlay"><img alt="Logo" src="Frame.png" style="height: 375px; width: 500px;"></div>
    </div>
</div>

Answer 1

将其设为poster url。

ORDER

Answer 2

如果由于某种原因Nick's answer不适合您，这里有另一种方法：

将图片和视频放在相对定位的父元素中。在图像上使用position: absolute并填充父元素。

如何使图像充当视频叠加层？

2 个答案: