如何自定义网站背景

这篇文章介绍如何用图床 CDN 给网站添加动态背景。

为什么用图床

图床的优势：

• 减轻服务器负担 — 图片存储和网站代码分离
• CDN 加速 — 全球节点分发，加载更快
• 管理方便 — 上传即用，不需要部署流程

实现步骤

1. 上传图片到图床

将背景图上传到图床（如 SM.MS、Dusays 等），获取直链 URL。

2. 配置背景数组

const bgImages = [
  'https://你的图床域名/xxx/bg1.jpg',
  'https://你的图床域名/xxx/bg2.jpg',
]

3. 双图层轮换

使用两个叠加的 div，通过 opacity 控制交叉淡入淡出效果。

效果

切换过程：模糊淡出 → 新图清晰展示 → 逐渐模糊。配合色温遮罩，白天暖色调、夜间冷色调，营造沉浸式浏览体验。