HOWTO · CSS
在 CSS 中居中背景影象
使用 background-position 使 CSS 背景影像居中，並使用 background-size 控制其大小。
本頁內容
若要讓 CSS 背景圖片置中，請設定 background-position: center。若希望圖片填滿容器，可加上 background-size: cover；它會保留圖片的長寬比，但可能裁切邊緣。若只想顯示一張圖片而不形成平鋪圖樣，請設定 background-repeat: no-repeat。這些屬性各自控制不同事項：位置屬性負責放置圖片，尺寸屬性負責縮放圖片，重複屬性則決定是否平鋪。
使用背景屬性讓 CSS 背景圖片置中
將背景設定在要顯示圖片的元素上。此範例中的 .hero 至少會填滿視窗高度。請將 photo.jpg 換成圖片的路徑。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hero {
min-height: 100vh;
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<main class="hero"></main>
</body>
</html>
background-position: center 會讓圖片在 .hero 中水平與垂直置中。兩個字的值 center center 效果相同。background-size: cover 會縮放圖片，直到容器完全被覆蓋；如果圖片與容器的長寬比例不同，圖片可能會沿著其中一個方向遭到裁切。若要顯示完整圖片，請使用 background-size: contain；這可能會讓容器留下未使用的空間。若要保留圖片的原始尺寸，則省略 background-size。
background-repeat: no-repeat 可防止圖片平鋪，但不會縮放或置中圖片。圖片小於容器時，預設的重複行為可能會產生平鋪；若不希望如此，請使用 no-repeat。background-attachment 控制背景是隨頁面捲動，還是固定在視窗的位置。這是選用設定，與圖片置中無關。這些宣告也可以寫在 background 簡寫屬性中，但分開設定能更容易調整每個選項。
執行此範例，即可將相同的宣告格式化為 CSS 文字，方便複製到樣式表中：
const declarations = {
backgroundImage: 'url("photo.jpg")',
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover"
};
for (const [property, value] of Object.entries(declarations)) {
const cssName = property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
console.log(`${cssName}: ${value};`);
}
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
將圖片元素定位為填滿視窗的替代方案
當圖片本身承載內容，或需要讓輔助科技讀取時，可以改用 img 元素；這是另一種做法，並非 CSS 背景。若要讓圖片填滿視窗並顯示在頁面內容後方，請將它設為固定定位，設定四側的偏移值，再將它置於內容後方。若要用這種方式放置元素，必須設定 position，top、right、bottom 和 left 才會生效。
<img class="viewport-image" src="photo.jpg" alt="">
<main class="page-content">
<h1>Page content</h1>
</main>
<style>
.viewport-image {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
</style>
此 HTML 範例顯示的標題是「Page content」，而且仍維持英文；這與 CSS 輸出區塊中的英文標籤是不同內容。這裡的 inset: 0 會將 top、right、bottom 和 left 都設為零，讓定位後的方框延伸至整個視窗。object-fit: cover 會在保留圖片比例的同時縮放圖片以填滿方框，因此可能裁切圖片。若要顯示完整圖片，可使用 object-fit: contain，但可能會留下未使用的空間。只有在圖片純供裝飾時，空白的 alt 才合適；若圖片傳達資訊，請提供有意義的替代文字。實際頁面中也要確保前景文字在圖片上仍清晰可讀。若目的只是提供裝飾性背景，第一種方法較簡單，也不會在文件中加入圖片元素。
