操作指南 - 全页图像
了解如何使用 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;
}
自己动手试一试 »
半页背景图像
