CSS 背景图片填满页面 | 全屏背景设置教程

CSS 如何使背景图片填满整个页面

使用以下 CSS 代码，你可以轻松将背景图片设置为全屏显示：

html, body {
  height: 100%;
}

body {
  background-image: url('your-image-url');
  background-repeat: no-repeat;
  background-size: cover;
}

解释：

1. html, body { height: 100%; }： 设置 html 和 body 元素的高度为 100%，使其占据整个页面的高度。
2. background-image: url('your-image-url');： 将背景图像设置为 body 元素的背景图像。请将 'your-image-url' 替换为你的图片 URL 地址。
3. background-repeat: no-repeat;： 设置背景图像不重复。
4. background-size: cover;： 设置背景图像大小为 cover，表示将图像拉伸以填满整个屏幕，并保持图像的比例。

注意：

• 请确保你的背景图片大小合适，以避免图片失真或过度拉伸。
• 如果你需要图片平铺，可以将 background-size 属性设置为 contain，或将 background-repeat 属性设置为 repeat。

通过以上步骤，你可以轻松地使用 CSS 代码将背景图片设置为全屏显示，为你的网页增添更多视觉效果。