212 lines
4.8 KiB
Markdown
212 lines
4.8 KiB
Markdown
# 图片资源命名与使用指南
|
||
|
||
## 📋 快速索引
|
||
|
||
### 首页背景图
|
||
```
|
||
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效果
|
||
```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`，找到对应位置：
|
||
|
||
```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`，找到对应位置：
|
||
|
||
```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`，找到：
|
||
|
||
```css
|
||
.hero-background {
|
||
opacity: 0.5; /* 改为 0.3、0.7 等 */
|
||
}
|
||
```
|
||
|
||
### 调整9张图的间距
|
||
```css
|
||
.analysis-grid-9 {
|
||
gap: var(--spacing-md); /* 改为 1rem、3rem 等 */
|
||
}
|
||
```
|
||
|
||
### 调整单张大图的高度
|
||
```css
|
||
.analysis-img.wide {
|
||
height: 450px; /* 改为 400px、500px 等 */
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎊 完成标志
|
||
|
||
当你看到以下内容时，表示成功：
|
||
|
||
✅ 首页有半透明背景图
|
||
✅ 文字清晰可读
|
||
✅ 9张自然地理图整齐排列
|
||
✅ 1张经济人口图居中显示
|
||
✅ 响应式布局正常
|
||
|
||
---
|
||
|
||
**祝你顺利添加图片！** ✨
|
||
|
||
*如有问题，随时告诉我！*
|