場景痛點
背景大圖載入慢、不同解析度下變形、多頁面維護繁瑣。解法：**極窄漸變條 (1px 寬) + CSS 水平平鋪**，幾 KB 體積實現全寬適應。
核心代碼
<%@ page contentType="text/html;charset=utf-8" %>
<html>
<head>
<title>背景自適應示範</title>
<style type="text/css">
body {
background-image: url(images/gradient-bar.jpg); <!-- 1px 寬漸變條 -->
background-repeat: repeat-x; <!-- 僅水平平鋪 -->
background-color: #e0f0ff; <!-- 兜底色，圖片載入前/失效時顯示 -->
}
</style>
</head>
<body>
<h1>內容區域自動適應寬度</h1>
</body>
</html>
圖片製作指南
- Photoshop / GIMP 新建 **1px 寬 × 高度覆蓋可視區** (如 800px) 畫布。
- 使用漸變工具從頂部色 (#0066cc) 到頂部色 (#ffffff) 垂直拉伸。
- 存為 **JPG 高品質 (80%)** 或 **PNG-8**，體積通常 **< 2 KB**。
- 放入 Web 應用
images/ 目錄。
進階變體
| 需求 | CSS 關鍵屬性 |
|---|
| 垂直漸變 (側邊欄) | background-repeat: repeat-y; 圖片改為 **高 1px × 寬度覆蓋** |
| 固定背景不隨滾動 | background-attachment: fixed; |
| 多層背景 (CSS3) | background: url(pattern.png) repeat, url(gradient.jpg) repeat-x #fff; |
| 響應式斷點切換 | @media (max-width: 768px) { body { background-image: url(mobile-gradient.jpg); } } |
現代化最佳實踐
- CSS 漸變函數：
background: linear-gradient(to bottom, #0066cc, #fff); **零圖片請求**、任意解析度完美、動畫可控。**首選方案**。
- Base64 內聯：極小圖片可
background-image: url(data:image/png;base64,...); 減少 HTTP 請求。
- 變數化：
:root { --brand-gradient: linear-gradient(...); } body { background: var(--brand-gradient); } 統一主題管理。
效能對比
| 方案 | 請求數 | 體積 | 渲染速度 | 維護性 |
|---|
| 大圖背景 | 1 | 200 KB+ | 慢 (下載阻塞) | 差 (需多尺寸切圖) |
| 1px 條平鋪 | 1 | 1-2 KB | 極快 | 中 (需製作圖片) |
| CSS linear-gradient | 0 | 0 | 最快 (GPU 加速) | 最好 (代碼即設計) |
