fix(theme): 背景图不再跟着半程淡出
切深色时立即隐藏背景图,切浅色时等底色过渡完再淡入,避免 65vh 边界出现半黑半白
This commit is contained in:
+12
-2
@@ -22,7 +22,7 @@
|
|||||||
height: 65vh;
|
height: 65vh;
|
||||||
background: url('./assets/site-bg.jpg') center top / cover no-repeat;
|
background: url('./assets/site-bg.jpg') center top / cover no-repeat;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 160ms var(--su-ease-in-out);
|
transition: opacity 160ms var(--su-ease-in-out) 160ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-background::after {
|
.site-background::after {
|
||||||
@@ -35,9 +35,10 @@
|
|||||||
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
|
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 这张背景图是浅色渐变图,深色下留着会糊成一层脏灰,淡出而不是直接消失 */
|
/* 这张背景图是浅色渐变图,深色下留着会糊成一层脏灰;切深色时立刻隐藏,避免半黑半白 */
|
||||||
[data-scheme='dark'] .site-background {
|
[data-scheme='dark'] .site-background {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
transition: opacity 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- 页头 ---------- */
|
/* ---------- 页头 ---------- */
|
||||||
@@ -1353,3 +1354,12 @@ html.theme-transition *::after {
|
|||||||
transition: none !important;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user