css背景如何放视频

CSS中不仅可以使用图片作为背景，还可以使用视频做背景。对于需要重复播放的背景视频，可以使用CSS3中的background-clip和background-size属性。

.background-video {
  background: url(video.mp4) no-repeat;
  background-size: cover;
  background-clip: content-box;
}
 

其中，background-clip: content-box的作用是将背景视频限制在内容区域内，防止视频溢出。而background-size: cover则是让视频尽可能地覆盖整个背景区域。

需要注意的是，不同浏览器对于背景视频的支持程度不同。为了兼容性，我们可以使用多种格式的视频作为背景，并使用HTML5 video元素作备用方案。

<video autoplay loop muted poster="video-poster.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> 您的浏览器不支持HTML5 video元素. </video>

在代码中，autoplay和loop分别表示自动播放和循环播放。muted则是将视频静音，防止对页面造成干扰。poster属性则是在视频加载前显示的一张图片。

在使用背景视频时，需要注意视频的大小和加载速度对网页性能的影响。建议选择较小的视频文件并压缩视频，以减少页面加载时间。