如何 - 全页图像
了解如何使用 CSS 创建全页背景图像。
全页图像
了解如何创建覆盖整个浏览器窗口的背景图像。以下示例显示了一个全屏(以及半屏)响应式背景图像
如何创建全高图像
使用容器元素,并使用 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;
}
自己试试 »
半页背景图片