修复首页蒙版不能覆盖整个页面的问题

index.html

@@ -9,31 +9,34 @@
     <style>
         html,
         body {
+            height: 100%;
             margin: 0;
             font-weight: 300;
-            font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
-                "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "sans-serif";
             background-image: url(https://random-api.czl.net/pic/all);
             background-size: cover;
-            height: 100%;
-            /* 确保 body 高度充满整个视窗 */
-            position: relative;
-            /* 为蒙版定位提供参照 */
+            overflow: auto;
+            /* 确保页面可以滚动 */
         }
 
         .overlay {
-            position: absolute;
-            /* 绝对定位，相对于最近的相对定位元素（这里是 body） */
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
-            /* 蒙版宽度覆盖整个视窗宽度 */
             height: 100%;
-            /* 蒙版高度覆盖整个视窗高度 */
-            background-color: rgba(0, 0, 0, 0.801);
-            /* 半透明黑色蒙版，透明度可以根据需求调整 */
-            z-index: 1;
-            /* 确保蒙版层位于最上方 */
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 2;
+            /* 确保其位于内容之上 */
+            overflow-y: auto;
+            /* 允许蒙版内部滚动 */
+        }
+
+        #markdown-content {
+            position: relative;
+            z-index: 3;
+            /* 确保内容可以被访问和滚动 */
+            background-color: transparent;
+            /* 可选，视你的需求而定 */
         }