Skip to content
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
叠加层
添加半透明叠加层以提高文字对比度。
透明度控制
调整叠加层强度（0到1）。
图片叠加
主要关注点：带叠加层的背景图片，用于增强文字对比度。
本页实际 Frontmatter 配置
yaml
---
layout: home
hero:
background:
type: image
image:
src: /images/hero-bg.jpg
overlay: true
overlayOpacity: 0.5
overlayColor: "rgba(0, 0, 0, 1)"
---API 配置项
| 键 | 类型 | 说明 |
|---|---|---|
hero.background.image.overlay | boolean | 启用叠加层 |
hero.background.image.overlayOpacity | number | 叠加层透明度（0-1） |
hero.background.image.overlayColor | string | 叠加层颜色 |