diff --git a/src/components/BackgroundLayer.vue b/src/components/BackgroundLayer.vue
new file mode 100644
index 0000000..f57feb0
--- /dev/null
+++ b/src/components/BackgroundLayer.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="bg-layer" :style="layerStyle">
+    <img
+      v-for="(imgSrc, index) in backgroundImages"
+      :key="index"
+      v-smart-img
+      :src="imgSrc"
+      :alt="`background-${index}`"
+      :class="['bg-image', imageClass]"
+      :style="imageStyle"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 背景图片数组
+  backgroundImages: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+
+  // 层级样式
+  layerStyle: {
+    type: Object,
+    default: () => ({
+      width: '100vw',
+      minHeight: '100vh',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      zIndex: 0,
+      pointerEvents: 'none',
+    }),
+  },
+
+  // 图片样式
+  imageStyle: {
+    type: Object,
+    default: () => ({
+      width: '100vw',
+      objectFit: 'cover',
+      objectPosition: 'center top',
+      display: 'block',
+    }),
+  },
+
+  // 图片类名
+  imageClass: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style scoped>
+.bg-layer {
+  width: 100vw;
+  min-height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-image {
+  width: 100vw;
+  object-fit: cover;
+  object-position: center top;
+  display: block;
+}
+</style>