HTMl插入视频背景

插入视频背景一段简单的css即可

首先定义HTML的video标签

<video src="视频路径" class="bjimg" autoplay loop muted></video>

其次加入css代码引用或者直接插入都可以

   .bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
     
    }

object-fit: cover; 保持原有尺寸比例。但部分内容可能被剪切。


当然也可以加入浏览器兼容代码如下

		.bjimg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -10;
			object-fit: cover;
			/*兼容浏览器版本*/
			-webkit-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

 

posted @ 2022-12-23 14:49  小kBlog  阅读(3681)  评论(0编辑  收藏  举报