设置背景

通过 CssBaseline 编辑器可以设置页面背景。

访问路径

1. 打开 VertiTab 设置页面
2. 点击侧边栏的"自定义主题"菜单
3. 选择要编辑的主题，点击"编辑"
4. 点击"🧩 组件自定义"标签页
5. 找到"CssBaseline"配置卡片，点击展开
6. 在"Body 元素样式"部分找到"Body 背景"

背景选择器功能

背景类型

纯色背景

• 点击颜色选择器图标打开背景选择器
• 在"纯色"标签页中选择颜色
• 支持调色板选择和自定义颜色输入
• 实时预览选择效果

渐变背景

• 切换到"渐变"标签页
• 配置渐变方向和颜色
• 支持线性渐变和径向渐变
• 可添加多个渐变色点

图片背景

• 切换到"图片"标签页
• 支持上传本地图片或输入图片链接
• 可设置图片显示模式（覆盖、包含、重复等）
• 支持位置调整

操作界面

背景预览区域

• 显示当前背景效果的小方块
• 空背景时显示透明网格图案
• 点击可打开背景选择器

背景值显示

• 显示当前背景的 CSS 值
• 长值会自动截断并显示省略号
• 空背景时显示占位提示文字

操作按钮

• 调色板图标：打开背景选择器
• 清除按钮：清空当前背景设置
• 关闭按钮：关闭选择器面板

操作步骤

设置纯色背景

1. 点击背景预览区域或调色板图标
2. 确保处于"纯色"标签页
3. 在颜色选择器中选择喜欢的颜色
4. 颜色会自动应用到预览区域

设置渐变背景

1. 打开背景选择器
2. 切换到"渐变"标签页
3. 选择渐变类型和方向
4. 设置起始和结束颜色
5. 可添加中间色点进行更复杂的渐变

设置图片背景

1. 打开背景选择器
2. 切换到"图片"标签页
3. 上传图片文件或输入图片 URL
4. 调整图片显示模式和位置
5. 预览效果并确认

清除背景

1. 打开背景选择器
2. 点击"清除"按钮
3. 或者在纯色模式下选择透明色

背景效果

应用范围

• 整个页面背景：影响所有界面的背景显示
• 主题一致性：与颜色方案和其他组件协调
• 视觉层次：为界面提供视觉基础

CSS 属性

背景设置会应用到 body 元素的 background 属性，支持：

• 纯色：#ffffff、rgb(255,255,255)、rgba(255,255,255,0.8)
• 渐变：linear-gradient(...)、radial-gradient(...)
• 图片：url(...) 配合相关属性

使用建议

背景选择原则

1. 与主题协调：背景应与整体颜色方案搭配
2. 避免干扰：不应影响文字和界面元素的可读性
3. 性能考虑：大尺寸图片可能影响加载性能
4. 用户体验：背景应提升而非干扰用户操作

不同类型建议

• 纯色背景：简洁、性能好，适合大多数场景
• 渐变背景：现代感强，适合追求视觉效果的用户
• 图片背景：个性化强，但需注意对比度和性能

常见问题避免

1. 对比度不足：深色背景配浅色文字，浅色背景配深色文字
2. 图片过于复杂：避免细节过多的背景图片影响阅读
3. 颜色冲突：确保背景与主题颜色协调统一

保存设置

所有背景设置会实时预览，点击主题编辑器的"保存"按钮保存更改。清空背景时会使用主题默认背景。