需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，

HTML中加入视频很简单加一个<video>  </video>即可

现在要设置视频为背景，上层还有图片、文字、等；

视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果 

比如：

这时视频width和weight设置为100%，已经到达视频原有的最大尺寸，但是还无法完全覆盖我们的div，所以现在要设置视频Video的属性和其父级DIV的属性： 

 .video_back {
            /*设置视频最小宽度和高度 这个设不设置没有什么影响 */
            /*min-width: 100%;
            min-height:100%;*/
            /**/
            width: 100% !important;
            height: 100%;
            /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
            position: absolute;
            /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
            left: 0;
            top: 0;
            /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
            z-index: -9999;
            /*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/
            object-fit: fill;
        }
        #parent{
            position:absolute;
        }

几个重要的设置：

  1. 视频样式中的：position:absolute；这是让视频相对于父级div生成绝对定位；
  2. z-index：-9999；这是让视频在堆叠顺序的最底层，作为背景；
  3. object-fit：fill；视频完全填充到div中的关键！！！！
  4. 父级设置样式position:absolute 生成相对定位的元素，相对于其正常位置进行定位。

 视频其他小属性

  1. muted  静音播放
  2. autoplay=autoplay；打开时自动播放；
  3. loop=loop；循环播放
  4. constrol 不显示视频播放框

 最终效果：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频背景网页</title>
    <style type="text/css">
        .video_back {
            /*设置视频最小宽度和高度*/
            /*min-width: 100%;
            min-height:100%;*/
            /**/
            width: 100% !important;
            height: 100%;
            /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
            position: absolute;
            /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
            left: 0;
            top: 0;
            /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
            z-index: -9999;
            /*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/
            object-fit: fill;
        }
        #parent{
            position:absolute;
        }
        .wen {
            font-size: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="parent" style="width:1920px;height:1080px;">
        <!--
    autoplay	autoplay如果出现该属性，则视频在就绪后马上播放。
    controls	controls如果出现该属性，则向用户显示控件，比如播放按钮。
    loop	loop如果出现该属性，则当媒介文件完成播放后再次开始播放。
    muted	muted规定视频的音频输出应该被静音。
    poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
    preload	preload
    如果出现该属性，则视频在页面加载时进行加载，并预备播放。
    如果使用 "autoplay"，则忽略该属性。
    src	 url要播放的视频的 URL。
    width	pixels设置视频播放器的宽度。
    height	pixels设置视频播放器的高度。-->
        <video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">
            您的浏览器不支持
        </video>
        <div class="wen">这是视频的上浮文字</div>
    </div>
</body>
</html>

 

# html
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区