uniapp背景图视频

在UniApp中设置背景图或视频

使用CSS设置背景图 在页面的样式部分添加背景图，可以使用绝对路径或网络URL。确保路径正确，图片资源需放在static目录下。

.page {
  background-image: url('/static/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

使用视频作为背景 通过video组件实现视频背景，需设置自动播放、循环和覆盖样式。注意部分平台可能限制自动播放，需用户交互触发。

<template>
  <view class="video-container">
    <video 
      src="/static/bg-video.mp4" 
      autoplay 
      loop 
      muted 
      class="video-bg"
    ></video>
    <view class="content">页面内容</view>
  </view>
</template>

<style>
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.video-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.content {
  position: relative;
  z-index: 1;
}
</style>

注意事项

• 视频格式建议使用MP4，兼容性较好。
• 移动端可能要求muted属性才能自动播放。
• 背景图或视频文件过大会影响加载速度，建议优化压缩。
• 测试不同平台（iOS/Android/小程序）的显示效果，部分平台需特殊处理。