diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index 6be289c..5c737b6 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -14,15 +14,27 @@
   background-color: transparent;
 }
 
-/* 顶部背景图：固定 65vh，底部渐隐到页面底色 */
+/* 顶部背景：固定 65vh，底部渐隐到页面底色；明暗两层交叉淡入 */
 .site-background {
   position: fixed;
   inset: 0 0 auto;
   z-index: 0;
   height: 65vh;
-  background: url('./assets/site-bg.jpg') center top / cover no-repeat;
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: cover;
   pointer-events: none;
-  transition: opacity 160ms var(--su-ease-in-out) 160ms;
+  opacity: 1;
+  transition: opacity 160ms var(--su-ease-in-out);
+}
+
+.site-background-light {
+  background-image: url('./assets/site-bg.jpg');
+}
+
+.site-background-dark {
+  background-image: url('./assets/site-bg-dark.jpg');
+  opacity: 0;
 }
 
 .site-background::after {
@@ -35,10 +47,12 @@
   background: linear-gradient(to bottom, transparent, var(--su-bg-page));
 }
 
-/* 这张背景图是浅色渐变图，深色下留着会糊成一层脏灰；切深色时立刻隐藏，避免半黑半白 */
-[data-scheme='dark'] .site-background {
+[data-scheme='dark'] .site-background-light {
   opacity: 0;
-  transition: opacity 0s;
+}
+
+[data-scheme='dark'] .site-background-dark {
+  opacity: 1;
 }
 
 /* ---------- 页头 ---------- */
@@ -1355,11 +1369,13 @@ html.theme-transition *::after {
   }
 }
 
-/* 背景图不跟着全局过渡：切深色立即消失，切浅色等底色过渡完再淡入 */
+/* 背景图不跟着全局颜色过渡，单独做明暗交叉淡入 */
 html.theme-transition .site-background {
-  transition: opacity 160ms var(--su-ease-in-out) 160ms !important;
+  transition: opacity 160ms var(--su-ease-in-out) !important;
 }
 
-html.theme-transition[data-scheme='dark'] .site-background {
-  transition: opacity 0s !important;
+@media (prefers-reduced-motion: reduce) {
+  html.theme-transition .site-background {
+    transition: none !important;
+  }
 }
diff --git a/stash-web/src/AppNext.tsx b/stash-web/src/AppNext.tsx
index 2f72e65..15167f7 100644
--- a/stash-web/src/AppNext.tsx
+++ b/stash-web/src/AppNext.tsx
@@ -644,7 +644,8 @@ export default function AppNext() {
         }}
       />
 
-      <div className="site-background" aria-hidden="true" />
+      <div className="site-background site-background-light" aria-hidden="true" />
+      <div className="site-background site-background-dark" aria-hidden="true" />
 
       <Layout
         contained
diff --git a/stash-web/src/assets/site-bg-dark.jpg b/stash-web/src/assets/site-bg-dark.jpg
new file mode 100644
index 0000000..7ebe781
Binary files /dev/null and b/stash-web/src/assets/site-bg-dark.jpg differ