📅 最后修改于: 2023-12-03 15:27:02.230000 🧑 作者: Mango
为网页添加背景图片是常见的网页美化方式之一。在HTML中，我们可以通过CSS的background-image属性来实现添加背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("背景图片路径");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>
background-image：设置背景图片的路径。可以是相对路径，也可以是绝对路径。
background-size：控制背景图片的大小。常用的属性值有cover、contain、100%、auto等。其中，cover是将背景图片扩展至整个屏幕，可能会裁剪图片；contain是在不裁剪图片的情况下将其缩放至整个屏幕。
background-repeat：控制背景图片是否重复。常用的属性值有no-repeat、repeat-x、repeat-y、repeat等。其中，no-repeat表示不重复，repeat-x表示在水平方向重复，repeat-y表示在垂直方向重复，repeat表示在水平和垂直方向都重复。
background-attachment：控制背景图片是否固定。常用的属性值有scroll、fixed。其中，scroll表示背景图片随内容滚动而滚动，fixed表示背景图片固定在页面中不随内容滚动。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.w3schools.com/w3images/mountains.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>