diff --git a/src/App.vue b/src/App.vue
index 85b3047..c40651b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,11 +13,12 @@ body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   overflow-x: hidden; /* 只隐藏水平滚动条 */
   overflow-y: auto; /* 允许垂直滚动 */
-  background-color: #f5f7fa00;
+  background-color: transparent !important;
 }
 
 #app {
   min-height: 100vh;
+  background-color: transparent !important;
 }
 
 /* 全局滚动条样式 */
diff --git a/src/style.css b/src/style.css
index 4cd1e5f..8a85590 100644
--- a/src/style.css
+++ b/src/style.css
@@ -24,6 +24,20 @@ body {
 /* Preview mode specific styles */
 .preview-view {
   background-color: transparent !important;
+  background: transparent !important;
+}
+
+/* 为预览页面专门设置透明背景 */
+body.preview-mode,
+html.preview-mode {
+  background-color: transparent !important;
+  background: transparent !important;
+}
+
+/* 确保 #app 在预览模式下也是透明的 */
+body.preview-mode #app {
+  background-color: transparent !important;
+  background: transparent !important;
 }
 
 /* 确保滚动行为平滑 */
@@ -76,8 +90,17 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    background-color: transparent;
   }
+  
+  /* 确保预览模式下即使在浅色主题也是透明的 */
+  body.preview-mode,
+  html.preview-mode,
+  body.preview-mode #app {
+    background-color: transparent !important;
+    background: transparent !important;
+  }
+  
   a:hover {
     color: #3498db;
   }
diff --git a/src/views/PreviewView.vue b/src/views/PreviewView.vue
index 6dfe457..53c9592 100644
--- a/src/views/PreviewView.vue
+++ b/src/views/PreviewView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="preview-view">
+  <div class="preview-view transparent-bg">
     <component 
       :is="widgetComponent" 
       v-if="widgetComponent" 
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { decodeConfig } from '../utils/configUtils';
 import { widgets } from '../widgets/registry';
 
@@ -26,6 +26,10 @@ const widgetComponent = computed(() => {
 });
 
 onMounted(() => {
+  // 为body添加透明背景类
+  document.body.classList.add('preview-mode');
+  document.documentElement.classList.add('preview-mode');
+  
   // 在 hash 模式下获取 URL 参数
   const searchParams = window.location.href.split('?')[1];
   const queryParams = new URLSearchParams(searchParams || '');
@@ -41,6 +45,12 @@ onMounted(() => {
     }
   }
 });
+
+onUnmounted(() => {
+  // 清理透明背景类
+  document.body.classList.remove('preview-mode');
+  document.documentElement.classList.remove('preview-mode');
+});
 </script>
 
 <style scoped>
@@ -50,6 +60,12 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: transparent;
+  background-color: transparent !important;
+  background: transparent !important;
+}
+
+.transparent-bg {
+  background: rgba(0, 0, 0, 0) !important;
+  background-color: rgba(0, 0, 0, 0) !important;
 }
 </style>