diff --git a/public/background.png b/public/background.png
new file mode 100644
index 0000000..143f71d
Binary files /dev/null and b/public/background.png differ
diff --git a/src/App.vue b/src/App.vue
index 40be79b..a11b4b4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,79 @@
 <template>
-    <div class="app-shell">
-        <main class="app-body">
-            <router-view />
-        </main>
-        <PageSwitcher />
-        <FooterSection :contact="contact" />
+    <div class="app-shell" :style="backgroundStyle">
+        <div class="background-overlay" :style="overlayStyle"></div>
+        <button
+            class="background-toggle"
+            @click="hideComponents = !hideComponents"
+            :title="hideComponents ? '显示内容' : '隐藏内容'"
+            :class="{ active: hideComponents }"
+        >
+            <span class="toggle-icon">{{ hideComponents ? "👁️" : "🙈" }}</span>
+            <span class="toggle-label">{{ hideComponents ? "显示" : "隐藏" }}</span>
+        </button>
+        <Transition name="fade-down">
+            <main class="app-body" v-if="!hideComponents" key="content">
+                <router-view />
+            </main>
+        </Transition>
+        <Transition name="fade-up">
+            <PageSwitcher v-if="!hideComponents" key="switcher" />
+        </Transition>
+        <Transition name="fade-down">
+            <FooterSection v-if="!hideComponents" :contact="contact" key="footer" />
+        </Transition>
     </div>
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, computed, ref } from "vue";
 import PageSwitcher from "./components/PageSwitcher.vue";
 import FooterSection from "./components/FooterSection.vue";
 import siteConfig from "./config/siteConfig";
 
 const contact = siteConfig.footer;
+const bg = siteConfig.appearance.background;
+const isMobile = ref(false);
+const hideComponents = ref(false);
+
+// 检测是否为移动设备
+const checkIfMobile = () => {
+    isMobile.value = window.innerWidth <= 768;
+};
+
+onMounted(() => {
+    checkIfMobile();
+    window.addEventListener("resize", checkIfMobile);
+});
+
+const getBackgroundImage = () => {
+    if (!bg.enable) return undefined;
+
+    // 根据屏幕尺寸选择图片
+    const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
+
+    if (!image) return undefined;
+
+    return image.startsWith("http") ? image : `/public/${image}`;
+};
+
+const backgroundStyle = computed(() => {
+    const imageUrl = getBackgroundImage();
+
+    if (!imageUrl) return {};
+
+    return {
+        backgroundImage: `url('${imageUrl}')`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundAttachment: "fixed",
+        filter: `blur(${bg.blur}px)`,
+    };
+});
+
+const overlayStyle = computed(() => {
+    if (!bg.enable || !getBackgroundImage()) return {};
+    return { backgroundColor: bg.overlay };
+});
 </script>
 
 <style scoped>
@@ -22,10 +81,132 @@ const contact = siteConfig.footer;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    position: relative;
 }
+
+.background-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.background-toggle {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: auto;
+    padding: 8px 12px;
+    border-radius: 50px;
+    background: linear-gradient(135deg, rgba(124, 193, 255, 0.15), rgba(124, 193, 255, 0.05));
+    border: 1.5px solid rgba(124, 193, 255, 0.3);
+    color: #7cc1ff;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    backdrop-filter: blur(12px);
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    box-shadow: 0 8px 32px rgba(124, 193, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    font-family: inherit;
+}
+
+.background-toggle:hover {
+    background: linear-gradient(135deg, rgba(124, 193, 255, 0.25), rgba(124, 193, 255, 0.1));
+    border-color: rgba(124, 193, 255, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 12px 40px rgba(124, 193, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.background-toggle:active {
+    transform: translateY(0px);
+    box-shadow: 0 4px 16px rgba(124, 193, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.background-toggle.active {
+    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.05));
+    border-color: rgba(255, 107, 107, 0.4);
+    color: #ff6b6b;
+}
+
+.background-toggle.active:hover {
+    background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(255, 107, 107, 0.1));
+    border-color: rgba(255, 107, 107, 0.6);
+    box-shadow: 0 12px 40px rgba(255, 107, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.toggle-icon {
+    display: inline-block;
+    font-size: 16px;
+}
+
+.toggle-label {
+    font-size: 12px;
+    letter-spacing: 0.5px;
+}
+
+@media (max-width: 640px) {
+    .background-toggle {
+        bottom: 16px;
+        right: 16px;
+        padding: 8px 10px;
+        font-size: 12px;
+    }
+
+    .toggle-label {
+        display: none;
+    }
+
+    .toggle-icon {
+        font-size: 14px;
+    }
+}
+
 .app-body {
     flex: 1;
     display: flex;
     flex-direction: column;
+    position: relative;
+    z-index: 1;
+}
+
+/* 过渡动画 */
+/* 上段组件：向上淡出，向下淡入 */
+.fade-up-enter-active,
+.fade-up-leave-active {
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.fade-up-enter-from {
+    opacity: 0;
+    transform: translateY(-20px);
+}
+
+.fade-up-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+/* 下段组件：向下淡出，向上淡入 */
+.fade-down-enter-active,
+.fade-down-leave-active {
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.fade-down-enter-from {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.fade-down-leave-to {
+    opacity: 0;
+    transform: translateY(-20px);
 }
 </style>
diff --git a/src/config/siteConfig.ts b/src/config/siteConfig.ts
index d2af116..8d61c1c 100644
--- a/src/config/siteConfig.ts
+++ b/src/config/siteConfig.ts
@@ -35,6 +35,18 @@ const siteConfig = {
         startDate: "2025-12-06",
     },
 
+    appearance: {
+        background: {
+            enable: true,
+            // URL 支持：可使用外部 URL 或本地路径
+            // 例如: "https://example.com/bg.jpg" 或 "background.webp"
+            image: "background.png", // 背景图片 URL 或本地路径（桌面端）
+            mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
+            blur: 0, // 背景模糊程度 (0-100)
+            overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
+        },
+    },
+
     umami: {
         enable: true,
         url: "https://cloud.umami.is/script.js",