📅 最后修改于: 2023-12-03 15:23:49.984000 🧑 作者: Mango
在 CSS 中，可以很容易地将背景图像添加到网页的任何元素中。当你需要为网站的 <body> 元素添加背景图像时，可以使用以下方式：
body {
background-image: url("图片路径");
}
在这里，我们使用 background-image 属性指定图像文件的路径。确保将图片放在与 CSS 文件相同的文件夹中，或者在路径中使用完全限定的 URL。
当你将背景图片应用到 <body> 元素中时，它将默认重复以填充整个屏幕。但可以使用 background-repeat 属性来控制图像在屏幕上的重复方式，例如：
body {
background-image: url("图片路径");
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 水平方向重复 */
background-repeat: repeat-y; /* 垂直方向重复 */
}
默认情况下，背景图像将从左上角开始，覆盖整个元素。可以使用 background-position 属性将背景图像移到其他位置。以下是一些示例：
body {
background-image: url("图片路径");
background-position: center; /* 图片居中 */
background-position: left top; /* 图片从左上角开始 */
background-position: right bottom; /* 图片从右下角开始 */
}
如果网页上的文本使用了白色字体，并希望背景图像够浅的话，可能需要添加一种背景颜色，这时候可以使用 background-color 属性。例如：
body {
background-image: url("图片路径");
background-color: #F5F5F5; /* 添加背景颜色 */
}
这样，当背景图像无法加载时，网页仍将有一个特定的背景颜色。
总的来说，使用 CSS 为 <body> 元素添加背景图像是一项基本的任务，但是通过掌握以上所述的技巧，你可以轻松地实现它。