diff --git a/stash-web/src/App.css b/stash-web/src/App.css index bbee2ce..6be289c 100644 --- a/stash-web/src/App.css +++ b/stash-web/src/App.css @@ -22,7 +22,7 @@ height: 65vh; background: url('./assets/site-bg.jpg') center top / cover no-repeat; pointer-events: none; - transition: opacity 160ms var(--su-ease-in-out); + transition: opacity 160ms var(--su-ease-in-out) 160ms; } .site-background::after { @@ -35,9 +35,10 @@ background: linear-gradient(to bottom, transparent, var(--su-bg-page)); } -/* 这张背景图是浅色渐变图,深色下留着会糊成一层脏灰,淡出而不是直接消失 */ +/* 这张背景图是浅色渐变图,深色下留着会糊成一层脏灰;切深色时立刻隐藏,避免半黑半白 */ [data-scheme='dark'] .site-background { opacity: 0; + transition: opacity 0s; } /* ---------- 页头 ---------- */ @@ -1353,3 +1354,12 @@ html.theme-transition *::after { transition: none !important; } } + +/* 背景图不跟着全局过渡:切深色立即消失,切浅色等底色过渡完再淡入 */ +html.theme-transition .site-background { + transition: opacity 160ms var(--su-ease-in-out) 160ms !important; +} + +html.theme-transition[data-scheme='dark'] .site-background { + transition: opacity 0s !important; +}