使用MP4视频作为CSS背景
使用MP4视频作为CSS背景
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP4视频背景示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
color: white;
overflow-x: hidden;
}
/* 视频背景容器 */
.video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
/* 视频元素 */
.video-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
/* 内容区域 */
.content {
position: relative;
z-index: 1;
padding: 50px 20px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.content p {
font-size: 1.2rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 30px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}
.cta-button {
display: inline-block;
padding: 12px 30px;
background-color: rgba(255, 255, 255, 0.2);
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
border: 2px solid white;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.cta-button:hover {
background-color: white;
color: #333;
}
/* 覆盖层，用于调整视频亮度和对比度 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 0;
}
/* 响应式调整 */
@media (max-width: 768px) {
.content h1 {
font-size: 2.5rem;
}
.content p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- 视频背景 -->
<div class="video-background">
<video autoplay muted loop playsinline>
<!-- 这里替换为你自己的视频路径 -->
<source src="https://assets.codepen.io/3364143/7b5d3d2b-6e1b-4e39-b6a6-4256e226d6c8.mp4" type="video/mp4">
您的浏览器不支持HTML5视频。
</video>
</div>
<!-- 覆盖层，用于调整视频效果 -->
<div class="overlay"></div>
<!-- 页面内容 -->
<div class="content">
<h1>动态视频背景</h1>
<p>这是一个使用MP4视频作为背景的网页示例。视频背景可以为网站增添动态感和视觉吸引力，特别适合用于产品展示、品牌宣传或创意作品集。</p>
<p>视频背景会自动播放、静音循环，并适配各种屏幕尺寸。</p>
<a href="#" class="cta-button">了解更多</a>
</div>
<script>
// 确保视频加载和播放
document.addEventListener('DOMContentLoaded', function() {
const video = document.querySelector('.video-background video');
// 确保视频播放
video.play().catch(error => {
console.log('视频自动播放被阻止:', error);
// 可以在这里添加播放按钮或处理逻辑
});
// 响应式调整
function adjustVideoSize() {
const videoElement = document.querySelector('.video-background video');
const container = document.querySelector('.video-background');
// 计算宽高比
const containerRatio = container.offsetWidth / container.offsetHeight;
const videoRatio = videoElement.videoWidth / videoElement.videoHeight;
if (containerRatio > videoRatio) {
// 容器更宽，视频需要填满高度
videoElement.style.width = 'auto';
videoElement.style.height = '100%';
} else {
// 容器更高，视频需要填满宽度
videoElement.style.width = '100%';
videoElement.style.height = 'auto';
}
}
// 初始调整
if (video.readyState >= 1) {
adjustVideoSize();
} else {
video.addEventListener('loadedmetadata', adjustVideoSize);
}
// 窗口大小改变时调整
window.addEventListener('resize', adjustVideoSize);
});
</script>
</body>
</html>
实现要点说明
##视频容器设置：
使用固定定位覆盖整个视口
设置z-index为负值，确保内容显示在视频上方
##视频元素设置：
autoplay：页面加载时自动播放
muted：静音播放（大多数浏览器要求静音才能自动播放）
loop：循环播放
playsinline：在移动设备上内联播放
object-fit: cover：确保视频覆盖整个容器
object-fit: fill：确保视频按照页面大小进行展示
覆盖层：
使用半透明黑色层叠在视频上，提高文字可读性
可以调整透明度或颜色来改变视觉效果
##响应式处理：
使用JavaScript确保视频在不同屏幕尺寸下正确显示
媒体查询调整文字大小和布局
注意事项
视频文件大小：尽量压缩视频以优化加载速度
移动设备性能：考虑在移动设备上使用静态图片替代
浏览器兼容性：提供备用内容或静态背景
可访问性：确保文字与背景有足够对比度
你可以将示例中的视频URL替换为你自己的MP4文件路径。
浙公网安备 33010602011771号