给网页添加动态视频背景 html+css

前言:

普通图片:
给网页添加背景图片 html+css
动态:
就是换成MP4格式作为网页背景。

实现:

  1. 定义html的video标签:
 <video src="xiamu.mp4" class="bjimg" autoplay loop muted>video>

在url里写入自己视频地址就好~

  1. 添加css样式就完成了:
   .bjimg {
     
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
     
    }

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

  1. 效果:

总结:给网页添加动态视频背景 html+css_第1张图片

你可能感兴趣的:(html+css的入门常见效果,前端,网页背景,html,css)