如何創建：全頁圖像

學習如何使用 CSS 創建全頁背景圖像。

全頁圖像

學習如何創建覆蓋整個瀏覽器窗口的背景圖像。下例顯示了全屏（和半屏）的響應式背景圖像：

演示 - 全頁背景圖像

演示 - 半頁背景圖像

如何創建全高圖像

使用一個容器元素，并向該容器添加一幅高度為 100% 的背景圖像。

提示：使用 50% 可以創建半頁背景圖像。然后使用以下背景屬性將圖像完美地居中和縮放：

注意：為了確保圖像覆蓋整個屏幕，您還必須將 height: 100% 同時應用于 <html> 和 <body>：

全頁背景圖像：

body, html {
  height: 100%;
}
.bg {
  /* 所用的圖像 */
  background-image: url("dancer.jpg");
  /* 全高 */
  height: 100%;
  /* 很好地居中并縮放圖像Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

親自試一試

半頁背景圖像：

.bg {
    height: 50%;
}

親自試一試