如何创建 - 整页图片
了解如何使用 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;
}
亲自试一试 »
半页背景图片: