背景图片配置
PocketSlide 的所有幻灯片组件都支持背景图片配置，包括透明度调整和模糊效果。
支持的组件
| 组件 | backgroundImage | backgroundOpacity | backgroundBlur |
|---|---|---|---|
| SlidesViewer | ✅ | ✅ | ✅ |
| CoverSlide | ✅ | ✅ | ✅ |
| ContentSlide | ✅ | ✅ | ✅ |
参数说明
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| backgroundImage | string | - | 背景图片 URL 地址 |
| backgroundOpacity | number | 50 | 透明度，0-100，值越小越透明 |
| backgroundBlur | number | 0 | 模糊程度，0 为不模糊，单位 px |
使用示例
基础用法
tsx
<ContentSlide title="标题" backgroundImage="/bg.jpg">
<p>内容</p>
</ContentSlide>调整透明度
tsx
<CoverSlide
title="标题"
backgroundImage="/bg.jpg"
backgroundOpacity={30}
/>添加模糊效果
tsx
<ContentSlide
title="标题"
backgroundImage="/bg.jpg"
backgroundBlur={8}
>
<p>带模糊背景的内容页</p>
</ContentSlide>组合使用
tsx
<ContentSlide
title="标题"
backgroundImage="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80"
backgroundOpacity={30}
backgroundBlur={4}
>
<p>内容</p>
</ContentSlide>全局背景设置
通过 SlidesViewer 可以设置全局背景，所有幻灯片都会继承这个背景：
tsx
<SlidesViewer
backgroundImage="https://example.com/bg.jpg"
backgroundOpacity={20}
backgroundBlur={4}
>
<YourSlide />
</SlidesViewer>单页覆盖全局背景
在单个幻灯片中设置背景会覆盖全局设置：
tsx
<SlidesViewer
backgroundImage="https://example.com/global-bg.jpg"
backgroundOpacity={20}
>
{/* 使用全局背景 */}
<ContentSlide title="第一页">
<p>继承全局背景</p>
</ContentSlide>
{/* 覆盖全局背景 */}
<ContentSlide
title="第二页"
backgroundImage="https://example.com/custom-bg.jpg"
backgroundOpacity={50}
>
<p>自定义背景</p>
</ContentSlide>
</SlidesViewer>推荐的背景图片来源
- Unsplash: https://unsplash.com
- Pexels: https://pexels.com
- Pixabay: https://pixabay.com
推荐的图片尺寸
- 16:9 比例: 1920x1080 或更高
- 4:3 比例: 1600x1200 或更高
图片格式
推荐使用 WebP 格式以获得更好的压缩比，也可以使用 JPG 或 PNG 格式。
视觉效果建议
透明度设置
- 10-30: 高透明度，背景若隐若现，适合封面
- 40-60: 中等透明度，平衡内容可读性和视觉效果
- 70-90: 低透明度，背景几乎不透明，适合强调内容
模糊效果
- 0-2px: 轻微模糊，几乎看不出效果
- 4-6px: 轻度模糊，背景略显模糊
- 8-12px: 中度模糊，背景明显模糊，不干扰内容
- 16px+: 高度模糊，背景几乎不可辨认
组合建议
- 封面页: 低透明度 (10-30) + 轻度模糊 (2-4px)
- 内容页: 中等透明度 (40-60) + 无模糊或轻度模糊
- 强调页: 高透明度 (10-20) + 中度模糊 (8px) 突出内容