如何将CSS背景图替换为视频且不破坏左右分栏布局？

直接把background-image的图片路径换成视频文件是行不通的——CSS的background-image属性只支持图像类格式（jpg/png/svg等），并不支持视频文件。不过我们可以通过嵌入<video>元素的方式实现视频背景，同时完全保留你原来的左右分栏布局，具体步骤如下：

1. 修改HTML结构，添加视频元素 #

在你的.side-left容器内部，插入一个<video>标签（放在容器内容的最前面，确保它在底层）：

<div class="side-left">
  <!-- 新增的背景视频元素 -->
  <video class="bg-video" autoplay muted loop playsinline>
    <source src="myvideo.mp4" type="video/mp4">
    <!-- 可选：添加webm格式兼容更多浏览器 -->
    <source src="myvideo.webm" type="video/webm">
  </video>
  
  <!-- 这里保留原来.side-left容器内的所有内容 -->
</div>

2. 调整CSS样式，实现视频背景效果 #

先移除.side-left原来的background-image属性，再添加以下CSS规则：

.side-left {
  position: relative; /* 为内部绝对定位的视频提供基准 */
  /* 保留你原来的分栏相关样式（比如宽度、flex属性、float等），不要删除 */
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让视频按比例覆盖整个容器，等效于background-size: cover */
  z-index: -1; /* 将视频置于容器内容的下方，不会遮挡原有内容 */
  /* 可选：添加视频加载失败时的兜底背景图 */
  background-image: url('left.jpg');
  background-size: cover;
  background-position: center;
}

关键属性说明 #

• autoplay：让视频自动播放（需要配合muted才能在现代浏览器生效）
• muted：静音播放，这是大多数浏览器允许自动播放的必要条件
• loop：让视频循环播放
• playsinline：避免iOS设备上视频自动全屏播放
• object-fit: cover：保证视频比例不变的同时填满整个容器，和你原来的背景图展示效果一致

这种方法不会破坏你的左右分栏布局——视频元素是绝对定位，脱离了文档流，不会占用容器的空间，.side-left原来的布局属性（比如宽度、flex占比等）完全可以保留。

内容的提问来源于stack exchange，提问作者Kezn Teh