整页图像

创建于 2024-12-03 / 26

字体： [默认] [大] [更大]

了解如何使用 CSS 创建整页背景图片。

Full Page Image

了解如何创建覆盖整个浏览器窗口的背景图片。以下示例显示了全屏（和半屏）响应式背景图像:

演示 - 整页背景图片

演示 - 半页背景图片

如何创建全高图像

使用容器元素并将背景图片添加到容器中，height: 100%。 提示: 使用 50% 创建半页背景图片。然后使用以下背景属性将图像完美居中和缩放:

注释: 要确保图像覆盖整个屏幕，您还必须将 height: 100% 应用于 <html> 和 <body>:

实例

body, html {
  height: 100%;
}

.bg {
/* 使用的图像 */
background-image: url("img_girl.jpg");

/* 全高 */
height: 100%;

/* 居中并很好地缩放图像 */
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} 亲自试一试 »

半页背景图片:

实例

.bg {
height: 50%;
} 亲自试一试 »

0 人点赞过