网站背景修改与多设备适配指南

纯色背景：
```
 
```
css

body { background-color: #f5f5f5; /* 浅灰色背景 */ }
图片背景：
```
 
```
css

body { background-image: url('bg.jpg'); background-size: cover; /* 完全覆盖容器 */ background-position: center; background-attachment: fixed; /* 固定背景不滚动 */ }
渐变背景：
```
 
```
css

body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

多设备适配技巧

媒体查询适配：
```
 
```
css

/* 手机端背景 */ @media (max-width: 768px) { body { background-image: url('mobile-bg.jpg'); } } /* 平板端背景 */ @media (min-width: 769px) and (max-width: 1024px) { body { background: #eef2ff; } }
高清屏优化：
```
 
```
css

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body { background-image: url('bg@2x.jpg'); } }
暗黑模式适配：
```
 
```
css

@media (prefers-color-scheme: dark) { body { background-color: #121212; } }

开发工具测试：
- Chrome DevTools：使用「设备模式」切换不同分辨率
- Firefox响应式设计模式：模拟多种设备尺寸
真机测试流程：
```
 
```
bash

# 本地开发时启用局域网访问 python3 -m http.server 8000
然后通过手机/平板访问 电脑IP:8000
云测试平台：
- BrowserStack（多设备真实环境）
- LambdaTest（自动化截图对比）
- CrossBrowserTesting（交互式测试）

性能优化：
- 背景图片压缩：使用TinyPNG等工具优化
- Lazy Load：延迟加载非首屏背景
- WebP格式：现代浏览器优先使用WebP
视觉一致性：
- 保持主色调跨设备统一
- 文字与背景的对比度需≥4.5:1（WCAG标准）
- 重要内容区域避免使用复杂背景图案
应急方案：
```
 
```
css

body { /* 背景加载失败时的备用方案 */ background-color: #f0f0f0; background-image: url('bg.jpg'), linear-gradient(#e66465, #9198e5); }

网站背景修改与多设备适配指南

更新时间：2025-06-02 13:02:14