操作指南 - 全頁影像
瞭解如何使用 CSS 建立全頁背景影像。
全頁影像
瞭解如何建立覆蓋整個瀏覽器視窗的背景影像。以下示例展示了一個全屏（和半屏）響應式背景影像。
如何建立全高影像
使用一個容器元素，併為該容器新增一個帶有 height: 100% 的背景影像。提示：使用 50% 來建立半頁背景影像。然後使用以下背景屬性來完美地居中和縮放影像：
注意：為確保影像覆蓋整個螢幕，您還必須將 height: 100% 應用於 <html> 和 <body>。
示例
body, html {
height: 100%;
}
.bg {
/* 使用的圖片 */
background-image: url("img_girl.jpg");
在上面的示例中，我們使用了畫素來設定影像的高度。如果您想使用百分比，例如 100%，使影像適應整個螢幕，請將視差容器的高度設定為 100%。注意：您還必須為 <html> 和 <body> 應用 height: 100%。
height: 100%;
/* 漂亮地居中並縮放圖片 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
自己動手試一試 »
半頁背景影像
