new-site/images/IMAGE_GUIDE.md

图片资源命名与使用指南

📋 快速索引

首页背景图

images/hero-bg.jpg          ← Hero区域背景底图（建议1920×1080px）

前期分析 - 场地分析

1.2.1 自然地理环境分析（9张图）

images/site-nature-01.jpg   ← 自然地理图1
images/site-nature-02.jpg   ← 自然地理图2
images/site-nature-03.jpg   ← 自然地理图3
images/site-nature-04.jpg   ← 自然地理图4
images/site-nature-05.jpg   ← 自然地理图5
images/site-nature-06.jpg   ← 自然地理图6
images/site-nature-07.jpg   ← 自然地理图7
images/site-nature-08.jpg   ← 自然地理图8
images/site-nature-09.jpg   ← 自然地理图9

1.2.2 经济、人口和基础设施（1张图）

images/site-economy.jpg     ← 经济人口基础设施分析图（建议大图，如1600×900px）

---

🎨 首页背景图说明

推荐规格

• 尺寸: 1920×1080px 或更大
• 格式: JPG（压缩质量80-90%）
• 文件大小: < 500KB
• 内容建议:
  • 青藏高原风景
  • 建筑效果图
  • 抽象纹理
  • 任何与项目相关的底图

CSS效果

.hero-background {
    opacity: 0.5;  /* 50%不透明度 */
    background-size: cover;  /* 覆盖整个区域 */
}

效果：

• ✅ 背景图半透明显示
• ✅ 不影响文字阅读
• ✅ 营造氛围感

如何替换

1. 准备一张喜欢的背景图
2. 命名为 hero-bg.jpg
3. 放入 images/ 文件夹
4. 刷新浏览器即可看到效果

---

🗺️ 场地分析 - 自然地理环境分析（9张图）

布局方式

• 桌面端: 3列 × 3行网格
• 平板端: 2列网格
• 手机端: 1列垂直排列

图片规格

• 推荐尺寸: 800×600px 或 1024×768px
• 最小宽度: 600px
• 文件格式: JPG 或 PNG
• 统一高度: 280px（自动裁剪，白底填充）

命名规范

必须严格按照以下格式命名：

site-nature-01.jpg  (注意：小写，连字符，两位数)
site-nature-02.jpg
...
site-nature-09.jpg

❌ 错误示例：

Site-Nature-1.jpg   (大写+缺少0)
site_nature_01.jpg  (下划线)
site nature 01.jpg  (空格)

修改标题和说明

打开 analysis.html，找到对应位置：

<!-- 图片1 -->
<div class="card">
    <div class="card-image analysis-img">
        <img src="images/site-nature-01.jpg" alt="自然地理图1" ...>
    </div>
    <div class="card-content">
        <h3>标题1</h3>           ← 改成你的标题
        <p>在此处插入说明文字...</p>  ← 改成你的说明
    </div>
</div>

---

📊 场地分析 - 经济、人口和基础设施（1张图）

布局方式

• 单张大图，居中显示
• 最大宽度: 1000px
• 固定高度: 450px

图片规格

• 推荐尺寸: 1600×900px 或更大（横图）
• 最小宽度: 1200px
• 文件格式: JPG 或 PNG
• 完整展示: 使用 object-fit: contain，允许白边

命名规范

site-economy.jpg

修改内容

打开 analysis.html，找到对应位置：

<div class="card single-card">
    <div class="card-image analysis-img wide">
        <img src="images/site-economy.jpg" alt="经济人口基础设施分析图" ...>
    </div>
    <div class="card-content">
        <h3>经济、人口和基础设施分析</h3>  ← 可修改标题
        <p>在此处插入关于当地经济发展水平...</p>  ← 修改详细说明
    </div>
</div>

---

🔍 常见问题排查

问题1：图片未显示

检查清单：

1. ✅ 文件名是否正确（大小写、连字符、数字位数）
2. ✅ 文件是否在 images/ 文件夹
3. ✅ 文件格式是否为 .jpg 或 .png
4. ✅ 浏览器控制台是否有404错误（F12 → Console）

问题2：图片变形

解决方案：

• 所有图片都会自动适配容器
• 使用 object-fit: contain 确保不变形
• 可能出现白边，这是正常现象

问题3：背景图不显示

检查清单：

1. ✅ 文件名必须是 hero-bg.jpg
2. ✅ 文件在 images/ 文件夹
3. ✅ 图片尺寸足够大（至少1920×1080px）
4. ✅ 清除浏览器缓存（Ctrl + Shift + R）

---

💡 高级技巧

调整背景图不透明度

打开 css/style.css，找到：

.hero-background {
    opacity: 0.5;  /* 改为 0.3、0.7 等 */
}

调整9张图的间距

.analysis-grid-9 {
    gap: var(--spacing-md);  /* 改为 1rem、3rem 等 */
}

调整单张大图的高度

.analysis-img.wide {
    height: 450px;  /* 改为 400px、500px 等 */
}

---

🎊 完成标志

当你看到以下内容时，表示成功：

✅ 首页有半透明背景图
✅ 文字清晰可读
✅ 9张自然地理图整齐排列
✅ 1张经济人口图居中显示
✅ 响应式布局正常

---

祝你顺利添加图片！ ✨

如有问题，随时告诉我！