如何创建：完整页图像

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

Cuba sendiri

Gambar latar belakang setengah halaman:

.bg {
    height: 50%;
}

Cuba sendiri