解決「大屏留白、小屏截圖」的關鍵在於正確使用 `background-size`：
| 值 | 行為 | 適用場景 |
|---|---|---|
cover | **等比縮放，完全覆蓋容器**，可能裁剪 | 全屏背景、Banner、登錄頁主視覺 |
contain | 等比縮放，**完整顯示圖片**，可能留白 | Logo、插圖、必須全見的圖 |
100% 100% | **拉伸填滿**，不保持比例，會變形 | 純色漸變、可變形的紋理圖 |
auto / 具體 px | 原尺寸 / 固定尺寸 | 精確控制的小圖標 |
.login-page {
min-height: 100vh; /* 至少一屏高 */
background-image: url('bg.jpg');
background-size: cover; /* 核心：覆蓋不留白 */
background-position: center; /* 居中裁剪 */
background-repeat: no-repeat; /* 不平鋪 */
background-attachment: fixed; /* 視差滾動效果(可選) */
}html, body { height: 100%; margin: 0; } /* 必須給根元素高度 */
.login-page { min-height: 100%; } /* 而非 height:100% 防內容超出 *//* 預載關鍵大圖 */
<link rel="preload" as="image" href="bg.jpg">
/* 或 CSS 漸變做佔位 */
.login-page {
background: linear-gradient(#1a2a6c, #b21f1f) center/cover no-repeat;
background-image: url('bg.jpg'); /* 覆蓋漸變 */
}/* 固定背景相對視口而非文檔 */
@media (max-width: 768px) {
.login-page { background-attachment: scroll; }
}
/* 防止 iOS 虛擬鍵盤壓縮視口 */
/* 使用 image-set 或 media query 提供 2x/3x 圖 */
.login-page {
background-image: image-set(
url('bg@1x.jpg') 1x,
url('bg@2x.jpg') 2x,
url('bg@3x.jpg') 3x
);
background-size: cover;
}| 策略 | 優點 | 缺點 | 建議 |
|---|---|---|---|
單圖 cover | 維護簡單、無縫切換 | 移動端可能下載 2MB+ 大圖 | 圖片 < 500KB 可接受 |
多圖 media query | 按需加載、流量友好 | 需美術輸出多套、斷點維護 | 大型項目、流量敏感 |
CSS image-set | 瀏覽器自動選最優 | 兼容性需前綴、不支持 WebP 回退 | 現代項目首選 |
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: system-ui, sans-serif; }
.login-wrapper {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: #1a1a2e url('login-bg.jpg') center/cover no-repeat;
position: relative;
}
.login-wrapper::before { /* 半透明遮罩增強表單可讀性 */
content: ''; position: absolute; inset: 0;
background: rgba(0,0,0,0.4);
}
.login-box {
position: relative; z-index: 1;
width: 100%; max-width: 360px; padding: 32px;
background: rgba(255,255,255,0.95);
border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
@media (max-width: 480px) {
.login-box { margin: 16px; border-radius: 8px; }
}
</style></head><body>
<div class="login-wrapper">
<div class="login-box"><!-- 表單內容 --></div>
</div></body></html>登錄頁背景自適應的核心公式：`min-height: 100vh` + `background-size: cover` + `background-position: center`。輔以 `html/body height:100%`、預載、高 DPI 適配、遮罩增強可讀性，即可得到在 13 寸筆記本到 27 寸 4K 顯示器、手機橫豎屏均完美呈現的登錄頁。切記：**圖片本身構圖要留足安全區**，關鍵視覺元素置於中心 60% 區域，避免 `cover` 裁剪丟失關鍵信息。
