背景 Video.module.css - CSS

简介

背景 Video.module.css 是一个使用 CSS 实现背景视频的样式表。它充分利用了 CSS3 中的 background 属性，同时结合 ::before 和 ::after 伪元素以及 z-index 属性，实现了一个类似于 video 标签的背景视频效果。

使用方法

首先需要在 HTML 文件的头部引入样式表：

<link rel="stylesheet" href="Video.module.css">

接着，在需要添加背景视频的元素中添加类名 bg-video：

<div class="bg-video"></div>

最后，在 CSS 文件中添加以下样式：

.bg-video {
  position: relative;
  z-index: 1;
}
.bg-video::before,
.bg-video::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px) brightness(0.5);
}
.bg-video::before {
  background-image: url('video.mp4');
  animation: bg-video 20s linear infinite alternate-reverse;
}
.bg-video::after {
  background-image: url('overlay.png');
}

@keyframes bg-video {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

样式说明

• .bg-video：添加背景视频效果的元素的类名。
• position: relative;：给元素设置相对定位。
• z-index: 1;：设置元素的 z-index 值为 1，使其在上下文中出现在最前面。
• .bg-video::before 和 .bg-video::after：伪元素，分别用于显示背景视频和添加一个遮罩层，使视频看起来更柔和。
• content: "";：伪元素需要添加 content 属性，并设为空字符串。
• position: absolute;：绝对定位，使伪元素可以与上下文进行分离，方便设置 z-index。
• left: 0; 和 top: 0;：将伪元素定位到元素的左上角。
• z-index: -1;：设置伪元素的 z-index 值为 -1，使其在上下文中出现在最后面（低于元素）。
• width: 100%; 和 height: 100%;：使伪元素的宽度和高度都为 100%，填满父元素。
• background-position: center center;：设置背景视频和遮罩层的位置为居中。
• background-repeat: no-repeat;：不重复背景图像。
• background-size: cover;：背景图像的尺寸保持比例不变并占满整个元素。
• filter: blur(5px) brightness(0.5);：为背景视频添加模糊效果和降低亮度的滤镜。
• background-image: url('video.mp4'); 和 background-image: url('overlay.png');：分别设置背景视频和遮罩层的图像。
• animation: bg-video 20s linear infinite alternate-reverse;：为背景视频添加动画效果，20s 线性循环播放。

示例

可以通过以下链接查看一个完整的 HTML 示例：

背景视频示例

结语

背景 Video.module.css 是一个简单实用的 CSS 样式表，可以为页面添加独特的背景视频效果，带来更好的视觉效果和用户体验。