首页 > 其他分享 >HTMl插入视频背景

HTMl插入视频背景

时间:2022-12-23 14:56:13浏览次数:39  
标签:视频 fit 100% object cover 插入 HTMl background size

插入视频背景一段简单的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;
		}

 

标签:视频,fit,100%,object,cover,插入,HTMl,background,size
From: https://www.cnblogs.com/xkboi/p/16996243.html

相关文章