🖼️ 自定义背景
支持多种图片来源,为你的新标签页换上个性化壁纸
NaiveTab 支持多种背景来源,满足不同的审美偏好。
📋 图片来源对比
| 来源 | 说明 | 更新方式 | 数量 |
|---|---|---|---|
| 纯色 | 单一颜色作为背景 | 手动切换 | 1 种 |
| Bing 每日一图 | 微软 Bing 首页的每日精美壁纸 | 自动每日更新 | 1 张/天 |
| Bing 图库 | Bing 历史精选壁纸合集 | 手动选择/随机 | 多张 |
| 本地图片 | 用户从电脑上传的图片 | 手动上传 | 无限制 |
| 自定义 URL | 指定网络图片链接 | 手动输入 | 按需 |
| 幻彩 | 纯 CSS 动态光效动画背景 | 实时渲染 | 8 种效果 |
🖼️ 设置面板布局
+----------------------------------------------+
| 背景设置 |
+----------------------------------------------+
| |
| 图片来源:[ 本地图片 ▼ ] |
| |
| +-----+ +-----+ +-----+ |
| | | | | | | |
| | img | | img | | img | |
| | | | | | | |
| +-----+ +-----+ +-----+ |
| |
| +----------------------+ |
| | + 上传本地图片 | |
| +----------------------+ |
| |
| [x] 随机展示 [~] 刷新:每次 |
| |
+----------------------------------------------+📥 本地图片上传
- 在设置面板 → 背景 中选择「本地图片」
- 点击 「+ 上传」 按钮
- 选择电脑中的图片文件(支持 JPG、PNG、WebP)
- 上传后出现在图片列表中,点击即可选中
🌅 Bing 每日一图
- 每天自动从 Bing 获取一张高质量壁纸
- 无需手动操作,打开新标签页即自动更新
- 可在设置面板中查看当日图片信息
🔄 随机展示
启用「随机展示」后,每次打开新标签页从当前图片来源的图片库中随机选择一张。适合有多张图片、希望每次打开都有新鲜感的用户。
✨ 幻彩背景
幻彩背景是纯 CSS 动画驱动的动态光效背景,无需加载任何图片资源。通过 @property 注册可动画属性,配合 @keyframes 在 GPU 合成线程上运行,零 JS 运行时开销。
效果一览
| 效果 | 中文名 | 视觉效果 |
|---|---|---|
aurora | 极光 | 径向渐变光团漂浮变幻,模拟极光流动效果 |
fluid | 流体 | 多层径向渐变漂移交织,色彩流动感 |
waves | 波浪 | 重复线性渐变角度旋转 + 位移,层叠波浪感 |
drift | 色彩漂移 | 锥形渐变色环旋转,色彩持续漂移 |
blobs | 墨团 | ::before/::after 伪元素 + 圆角变形 + 模糊,有机墨团形态 |
mesh | 网格渐变 | 多点径向渐变交织,丰富渐变层次 |
noise | 噪点纹理 | SVG feTurbulence 滤镜 + 渐变底色,颗粒质感 |
ripple | 涟漪 | background-size 同心圆扩散,水波涟漪效果 |
配色预设
内置 8 套预设配色方案(极光 / 日落 / 海洋 / 霓虹 / 森林 / 星系 / 春日 / 午夜),每套含浅色 + 深色各 6 色,选中后即时预览。
节能策略
- 标签页切到后台时自动暂停动画(
animation-play-state: paused) - 回到前台自动恢复(
animation-play-state: running) - 纯 CSS 动画无 JS CPU 开销,暂停/恢复零延迟
🎨 自动提取主题色
启用「自动主题色」和「自动背景色」后,NaiveTab 会智能分析当前壁纸的色调,自动设置主题色与背景色:
- 主题色:对标 Android Palette Vibrant 画像,在壁纸中寻找鲜艳可读的颜色作为交互控件(开关、按钮等)的强调色
- 背景色:全局 RGB 均值法取壁纸整体氛围色,钳制为舒适的阅读基底色
- 幻彩背景:从色板中选取饱和度最高的颜色作为主题色,最亮/最暗色作为背景色
- 开启后手动选色将被禁用,配色随壁纸切换自动更新
⚙️ 设置项
| 设置项 | 说明 |
|---|---|
| 图片来源 | 纯色 / Bing 每日一图 / Bing 图库 / 本地图片 / 自定义 URL / 幻彩 |
| 纯色颜色 | 选择纯色背景时的颜色 |
| 幻彩效果 | 选择幻彩动画效果(8 种可选) |
| 幻彩配色 | 选择预设配色方案或自定义 6 色色板 |
| 随机展示 | 是否每次打开随机切换图片 |
| 刷新频率 | 每次打开 / 每天 / 每小时 |
| 自动主题色 | 根据壁纸自动提取并应用主题色 |
| 自动背景色 | 根据壁纸自动提取并应用背景色 |
| 背景不透明度 | 控制背景图的透明程度 |
| 背景模糊度 | 控制背景图的高斯模糊程度 |
| 视差效果 | 鼠标移动时背景图轻微偏移,增强空间感 |
| 收藏 | 在图片列表中收藏喜爱的图片 |
| 删除 | 在图片列表中移除不需要的图片 |
🚪 快速入口
除了通过设置面板访问背景设置外,还可以在页面空白处 右键 → 更换壁纸 快速打开背景设置面板。
⚠️ 注意事项
- 本地图片存储在浏览器 IndexedDB 中,清除浏览器数据会丢失
- 建议定期通过「导出设置」备份图片配置
- 图片过大会影响首次加载速度,建议使用压缩后的图片
- Bing 图片来源需要网络连接才能获取
- 幻彩背景在标签页后台时自动暂停动画以节省电量
- 视差效果在幻彩背景模式下不可用(动画背景不需要平移)