如何创建：全页图像

学习如何使用 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%;
}

亲自试一试