📝 这是什么？

这里控制网站的背景显示效果。你可以选择使用顶部横幅 (Banner)、全屏背景 (Overlay) 或者纯色背景。

📂 文件位置

src/config/backgroundWallpaper.ts

🛠️ 配置详解

1. 基础模式设置

export const backgroundWallpaper: BackgroundWallpaperConfig = {
  // 壁纸模式：
  // "banner" = 顶部横幅 (推荐，最常用)
  // "overlay" = 全屏背景 (适合二次元风格)
  // "none" = 无背景 (极简风格)
  mode: "banner", 

  // 是否允许用户切换壁纸模式
  // true = 导航栏会出现切换按钮
  // false = 锁定为你设置的 mode，提升性能
  switchable: true,

  // 壁纸图片路径
  src: {
    desktop: "/assets/images/d1.webp", // 电脑端壁纸
    mobile: "/assets/images/m1.webp", // 手机端壁纸
  },

2. Banner 模式详细配置

当 mode 设为 "banner" 时，以下配置生效：

  banner: {
    // 图片位置调整 (CSS object-position)
    // "center" = 居中, "0% 20%" = 水平0% 垂直20%
    // 详细配置请参考下方的"壁纸位置配置详解"章节
    position: "0% 20%",

    // 首页大标题文字
    homeText: {
      enable: true, // 是否显示
      title: "Lovely firefly!", // 主标题
      
      // 副标题列表
      subtitle: [
        "In Reddened Chrysalis...",
        "From Shattered Sky...",
      ],
      
      // 打字机特效配置
      typewriter: {
        enable: false, // true = 循环打字显示所有副标题; false = 每次刷新随机显示一条
        speed: 100, // 打字速度 (ms)
        deleteSpeed: 50, // 删除速度 (ms)
        pauseTime: 2000, // 停顿时间 (ms)
      },
    },

    // 图片来源/画师致谢
    credit: {
      enable: { desktop: true, mobile: true }, // 是否显示致谢
      text: { desktop: "Pixiv - 晚晚喵", mobile: "..." }, // 画师名字
      url: { desktop: "...", mobile: "..." }, // 画师主页链接
    },

    // 导航栏透明模式
    // "semi" = 半透明加圆角
    // "full" = 完全透明
    // "semifull" = 动态透明 (滚动时变化)
    navbar: { transparentMode: "semifull" },

    // 底部波浪动画
    waves: {
      enable: { desktop: true, mobile: true }, // 是否开启波浪
      performance: {
        quality: "high", // "high" | "medium" | "low"
        hardwareAcceleration: true, // 是否开启硬件加速
      },
    },
  },

3. Overlay 模式详细配置

当 mode 设为 "overlay" (全屏背景) 时，以下配置生效：

  overlay: {
    zIndex: -1, // 层级，确保在内容下方
    opacity: 0.8, // 透明度 (0-1)
    blur: 1, // 模糊程度 (px)
  },
};

4. 壁纸位置配置详解 (Position)

backgroundWallpaper.banner.position 配置支持所有 CSS object-position 属性值，提供更精确的壁纸定位控制。

1. 关键字

单关键词

• "top" - 顶部居中
• "center" - 居中（默认）
• "bottom" - 底部居中
• "left" - 左侧居中
• "right" - 右侧居中

双关键词组合

• "top left" 或 "left top" - 左上角
• "top center" - 顶部居中
• "top right" 或 "right top" - 右上角
• "center left" 或 "left center" - 左侧居中
• "center center" - 正中央
• "center right" 或 "right center" - 右侧居中
• "bottom left" 或 "left bottom" - 左下角
• "bottom center" - 底部居中
• "bottom right" 或 "right bottom" - 右下角

2. 百分比值

单值（应用于水平和垂直方向）

• "25%" - 水平和垂直都偏移25%
• "50%" - 居中（等同于 "center"）

双值（水平 垂直）

• "0% 0%" - 左上角
• "50% 0%" - 顶部居中
• "100% 0%" - 右上角
• "0% 50%" - 左侧居中
• "50% 50%" - 正中央
• "100% 50%" - 右侧居中
• "0% 100%" - 左下角
• "50% 100%" - 底部居中
• "100% 100%" - 右下角
• "25% 75%" - 自定义位置

3. 像素值

单值

• "10px" - 水平和垂直都偏移10像素

双值

• "10px 20px" - 水平偏移10px，垂直偏移20px
• "-10px 0px" - 向左偏移10px，垂直居中
• "0px -20px" - 水平居中，向上偏移20px

4. 混合值

• "left 25%" - 左对齐，垂直25%位置
• "right 10px" - 右对齐，垂直偏移10像素
• "25% top" - 水平25%位置，顶部对齐
• "10px bottom" - 水平偏移10像素，底部对齐

常用场景配置示例

// 默认居中
position: "center"

// 人物肖像壁纸（突出主体，保持头部可见）
position: "center top"

// 风景壁纸（突出天空和远景）
position: "center 25%"

// 建筑壁纸（根据建筑位置调整）
position: "50% 40%"

// 精确像素调整
position: "10px 20px"

调试技巧

1. 使用浏览器开发者工具: F12 打开控制台，选择壁纸元素，实时调整 object-position 样式。
2. 常用调试值: 尝试 "0% 0%", "50% 50%", "100% 100%" 等极端值来理解定位逻辑。

版权所有

版权归属：夏叶

许可证：署名 4.0 国际 (CC-BY-4.0)