Skip to content
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
纯色背景
简单稳定的纯色背景方案。
单页导航/搜索配色
使用 hero.colors.nav* / hero.colors.search* 直接配置顶部导航和搜索框。
渐变扩展
支持线性/径向/锥形渐变。
单一纯色背景
主要关注点：hero.background.type=color。
页面
- - 基础纯色背景
- - 新版渐变契约 + 旧版兼容
- - 亮色/暗色模式颜色
单色背景页面的导航/搜索配置
使用 hero.colors.nav* / hero.colors.search* 可直接配置导航栏与搜索框颜色。
yaml
hero:
colors:
navText: "rgba(255, 255, 255, 1)"
navTextScrolled: "rgba(26, 26, 46, 1)"
navTextHover: "rgba(255, 255, 255, 1)"
navBackground: "rgba(30,45,90,0.72)"
searchBackground: "rgba(255,255,255,0.16)"
searchHoverBackground: "rgba(255,255,255,0.22)"
searchText: "rgba(255, 255, 255, 1)"
searchTextMuted: "rgba(255,255,255,0.92)"
searchBorder: "rgba(255,255,255,0.36)"
searchKeyBackground: "rgba(255,255,255,0.12)"
searchKeyText: "rgba(255,255,255,0.9)"| 键分组 | 键 |
|---|---|
导航栏（hero.colors） | navText、navTextScrolled、navTextHover、navTextHoverScrolled、navBackground、navBackgroundScrolled |
搜索框（hero.colors） | searchBackground、searchBackgroundScrolled、searchHoverBackground、searchHoverBackgroundScrolled、searchText、searchTextScrolled、searchTextMuted、searchTextMutedScrolled、searchBorder、searchBorderScrolled、searchKeyBackground、searchKeyBackgroundScrolled、searchKeyText、searchKeyTextScrolled |