> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Banner

> 适用版本 ≥ 2.0.0 ｜ 后台路径：主题设置 → 布局设置 → Banner 布局

Banner 是首页顶部的视觉区，也是整套页面高度的基准。这一页只讲**形态与高度**；图片、视频、轮播的素材配置见 [Banner 样式](/ethereal/appearance/banner-style.md)。

## 配置项

| 选项    | 默认值  | 说明                                                                        |
| ----- | ---- | ------------------------------------------------------------------------- |
| 模式    | 横幅模式 | 关闭/纯色：无横幅；横幅：非首页 35vh、首页 65vh；全屏：首页整屏、非首页同横幅；全屏透明：整屏壁纸作页面背景，配合「高级材质」让卡片磨砂 |
| 全屏布局  | 经典模式 | 仅全屏模式出现。经典：壁纸随页面滚动移出首屏、不模糊；沉浸：壁纸固定视口，首页下滑由清晰渐变到最大模糊，标题上移淡出                |
| 壁纸透明度 | 0.8  | 仅全屏透明。0.3\~1，调低后露出页面底色                                                    |
| 背景模糊度 | 10   | 全屏透明、或全屏 + 沉浸。0\~24 px，值越大越柔和                                             |
| 卡片透明度 | 0.6  | 全屏透明、或全屏 + 沉浸。0.3\~1，需开启「高级材质」                                            |

## 推荐配法

**纯文字博客**：模式选「关闭/纯色」，页面从第一屏就是内容，加载最快，也不依赖任何图片资源。

**常规图文博客（默认）**：横幅模式。首页 65vh 露出标题，进入文章页后压缩到 35vh，滚动时内容自然上移。

**摄影 / 视觉向**：全屏模式 + 经典布局。首页整屏展示壁纸，下滑时壁纸随页面移出，不打断阅读。

**磨砂质感**：全屏透明 + 开启「高级材质」，用「壁纸透明度」控制背景存在感、「卡片透明度」控制内容可读性。建议先调卡片透明度到 0.7 以上，保证正文对比度。

**首屏叙事**：全屏 + 沉浸（Hero）。壁纸固定在视口，首页下滑时模糊度从 0 渐变到设定值，标题上移淡出，适合配合大字标题做落地页。

## 注意事项

- **模式切换是整页级过渡**，主题会临时加过渡类避免元素跳变；移动端会关闭层化过渡以保流畅，切换瞬间观感与桌面端略有差异
- 「卡片透明度」只对开启了「高级材质」的卡片、导航栏、悬浮按钮生效；没开高级材质时调它看不到变化
- 沉浸布局的模糊值是**最大值**：首页从 0 渐变到该值，非首页始终保持该值
- 访客可以在前台「显示设置 → 壁纸」里覆盖模式（前提是后台开启了壁纸标签页），所以线上看到的形态可能与后台默认值不同
- 全屏与全屏透明对首屏图片尺寸要求较高，建议配合 [速度优化](/ethereal/site/performance.md) 的 Banner 宽度分档