子比主题背景图片设置完整美化教程

一、效果预览与介绍

本教程将指导您为子比主题设置全站背景图片，并实现日间/夜间模式差异化显示。通过本美化方案，您可以：

• 为网站设置个性化背景图片
• 保持日间模式背景美观
• 确保夜间模式阅读舒适性
• 实现背景固定、居中等高级效果

二、准备工作

1. 必备条件

• 已安装并激活子比主题
• 拥有网站管理员权限
• 准备好背景图片素材

2. 图片准备建议

• 尺寸推荐：1920×1080像素或以上
• 格式建议：JPEG、PNG、WebP
• 颜色搭配：
  • 日间模式：明亮、清晰，不影响文字阅读
  • 夜间模式：深色、低对比度，推荐纯色或渐变

三、详细设置步骤

步骤1：上传背景图片

1. 登录WordPress后台
2. 进入「媒体」→「添加新媒体」
3. 上传您的背景图片文件
4. 复制图片URL地址备用

步骤2：添加自定义CSS代码

1. 进入子比主题设置 → 外观 → 自定义CSS
2. 或使用WordPress自定义器 → 额外CSS
3. 粘贴以下代码：

步骤3：代码参数说明

参数	说明	可选值
background-image	背景图片地址	您的图片URL
background-position	背景定位	center, top left, 50% 50%
background-repeat	重复方式	no-repeat, repeat, repeat-x
background-attachment	滚动方式	fixed（固定）, scroll（滚动）
background-size	尺寸适应	cover（覆盖）, contain（包含）
background-color	纯色背景	十六进制颜色值

四、高级美化方案

方案A：不同页面不同背景

方案B：渐变背景替代

方案C：多背景图层

五、优化建议与注意事项

1. 性能优化

• 图片压缩：使用TinyPNG等工具压缩图片
• 懒加载：确保背景图片不阻塞页面加载
• WebP格式：现代浏览器优先使用WebP格式

2. 可访问性

• 确保背景与文字对比度达标
• 提供背景切换选项（高级功能）
• 移动端适配测试