網頁底部灰色背景實現原理：CSS 背景圖片與 body 背景色結合技巧

現象分析

頁面底部呈現一條灰色橫條，左右兩側延伸至視口邊緣，中間內容區保持白色。

實現方案

1. body 設置背景色：body { background-color: #f0f0f0; } 奠定整頁基調。
2. 容器居中+白色背景：

   .wrapper { width: 1200px; margin: 0 auto; background: #fff; min-height: 100vh; }
   

3. 底部固定條帶（可選）：若需底部固定灰色 footer，用 footer { background: #333; color: #fff; } 配合 Flex/Grid 佈局將 footer 吸底。

關鍵點

• 背景色填充整個視口，容器通過 margin: 0 auto 實現視覺上「兩側灰、中間白」。
• 若設計稿底部有圖片紋理，可在 body 用 background: url(bg.png) repeat-x bottom。
• 注意 html, body { height: 100%; } 確保背景拉滿。