feat(hugo): 添加植物学研究背景图，适配桌面端和移动端

site/static/BACKGROUND.md

@@ -0,0 +1,9 @@
+# 背景图资源
+- 植物学研究手稿风格背景
+- 桌面端：完整背景图，角落装饰
+- 移动端：裁剪为角落装饰，避免画面断层
+
+## 使用方法
+1. 将图片保存到 site/static/background.jpg
+2. CSS 中使用 responsive background 策略
+3. 移动端使用背景色 + 角落装饰

site/static/css/site.css

@@ -27,24 +27,36 @@
   --list-accent: #eef2ee;
 }
 
-/* 植物学研究手稿风格背景 */
+/* 植物学研究手稿风格背景 - 响应式适配 */
 body {
   margin: 0;
   background-color: var(--bg);
-  /* 纸张质感纹理 */
-  background-image:
-    /* 角落淡色晕影（不在中心） */
-    radial-gradient(circle at 0% 0%, rgba(139, 115, 85, 0.04) 0%, transparent 50%),
-    radial-gradient(circle at 100% 0%, rgba(139, 115, 85, 0.03) 0%, transparent 50%),
-    radial-gradient(circle at 0% 100%, rgba(139, 115, 85, 0.03) 0%, transparent 50%),
-    radial-gradient(circle at 100% 100%, rgba(139, 115, 85, 0.04) 0%, transparent 50%),
-    /* 极淡的纸张纤维纹理 */
-    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, rgba(58, 56, 50, 0.01) 2px, rgba(58, 56, 50, 0.01) 4px),
-    /* 植物学研究手稿风格 - 角落装饰 */
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%235c7560' stroke-width='0.5' stroke-opacity='0.08'%3E%3Cpath d='M50 50 Q80 30 100 60 T140 80'/%3E%3Cpath d='M55 55 Q75 40 90 65 T130 75'/%3E%3Cpath d='M540 50 Q510 30 490 60 T450 80'/%3E%3Cpath d='M535 55 Q515 40 500 65 T460 75'/%3E%3Cpath d='M50 550 Q80 570 100 540 T140 520'/%3E%3Cpath d='M55 545 Q75 560 90 535 T130 525'/%3E%3Cpath d='M540 550 Q510 570 490 540 T450 520'/%3E%3Cpath d='M535 545 Q515 560 500 535 T460 525'/%3E%3C/g%3E%3Cg fill='%235c7560' stroke='none' opacity='0.04'%3E%3Cpath d='M20 200 Q40 180 60 200 T80 240 Q60 260 40 240 T20 200'/%3E%3Cpath d='M580 200 Q560 180 540 200 T520 240 Q540 260 560 240 T580 200'/%3E%3C/g%3E%3C/svg%3E");
-  background-size: 600px 600px, 4px 4px, 800px 800px;
-  background-position: center, center, center;
-  background-attachment: local, local, fixed;
+  /* 桌面端：完整背景图 */
+  background-image: url("../background.png"),
+    /* 纸张纹理 */
+    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, rgba(58, 56, 50, 0.01) 2px, rgba(58, 56, 50, 0.01) 4px);
+  background-size: cover, 4px 4px;
+  background-position: center, center;
+  background-repeat: no-repeat;
+  background-attachment: fixed, local;
+}
+
+/* 移动端优化：避免画面断层 */
+@media (max-width: 720px) {
+  body {
+    /* 移动端使用纯色背景 + SVG 角落装饰 */
+    background-image: 
+      /* 角落淡色晕影 */
+      radial-gradient(circle at 0% 0%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
+      radial-gradient(circle at 100% 0%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
+      radial-gradient(circle at 0% 100%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
+      radial-gradient(circle at 100% 100%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
+      /* SVG 角落植物装饰 */
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.06'%3E%3Cpath fill='%235c7560' d='M10 100 Q30 80 50 100 T80 140 Q60 160 40 140 T10 100'/%3E%3Cpath fill='%235c7560' d='M350 100 Q330 80 310 100 T280 140 Q300 160 320 140 T350 100'/%3E%3Cpath fill='%235c7560' d='M10 550 Q30 530 50 550 T80 590 Q60 610 40 590 T10 550'/%3E%3Cpath fill='%235c7560' d='M350 550 Q330 530 310 550 T280 590 Q300 610 320 590 T350 550'/%3E%3C/g%3E%3C/svg%3E");
+    background-size: auto, 4px 4px, 400px 600px;
+    background-position: center, center, center;
+    background-attachment: scroll, local, fixed;
+  }
 }
 
 * { box-sizing: border-box; }