css在图片上添加视频

CSS是一种用来描述文档外观的样式表语言。在Web设计中，CSS也可以帮助我们把视频添加到图片之上。

div class="container">
    img src="image.png" alt="image">
    div class="video-overlay">
    video autoplay controls>
    source src="video.mp4" type="video/mp4">
    /video>
    /div>
    /div>
.container {
    position: relative;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.video-overlay video {
    width: 100%;
    height: 100%;
}
    

首先，在一个容器div中嵌套图片和视频。将容器的定位设置为相对，以便里面绝对定位的视频浮在图片之上。在视频div中，设置其为绝对定位，并且覆盖整个容器。pointer-events:none; 使得这个div不会影响鼠标事件。视频的宽和高都设置为100%以撑满整个容器。最后将代码放在pre标签中使其更易读懂。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！