Skip to content

🖼️ 自定义背景

支持多种图片来源,为你的新标签页换上个性化壁纸

NaiveTab 支持多种背景来源,满足不同的审美偏好。

📋 图片来源对比

来源说明更新方式数量
纯色单一颜色作为背景手动切换1 种
Bing 每日一图微软 Bing 首页的每日精美壁纸自动每日更新1 张/天
Bing 图库Bing 历史精选壁纸合集手动选择/随机多张
本地图片用户从电脑上传的图片手动上传无限制
自定义 URL指定网络图片链接手动输入按需
幻彩纯 CSS 动态光效动画背景实时渲染8 种效果

🖼️ 设置面板布局

+----------------------------------------------+         
|  背景设置                                     |        
+----------------------------------------------+         
|                                              |         
|  图片来源:[ 本地图片  ▼ ]                    |        
|                                              |         
|  +-----+ +-----+ +-----+                    |          
|  |     | |     | |     |                    |          
|  | img | | img | | img |                    |          
|  |     | |     | |     |                    |          
|  +-----+ +-----+ +-----+                    |          
|                                              |         
|  +----------------------+                   |          
|  |  +  上传本地图片        |                   |       
|  +----------------------+                   |          
|                                              |         
|  [x] 随机展示    [~] 刷新:每次               |        
|                                              |         
+----------------------------------------------+

📥 本地图片上传

  1. 在设置面板 → 背景 中选择「本地图片」
  2. 点击 「+ 上传」 按钮
  3. 选择电脑中的图片文件(支持 JPG、PNG、WebP)
  4. 上传后出现在图片列表中,点击即可选中

🌅 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 图片来源需要网络连接才能获取
  • 幻彩背景在标签页后台时自动暂停动画以节省电量
  • 视差效果在幻彩背景模式下不可用(动画背景不需要平移)