HTML如何设置背景图片：
背景图片的引入
在HTML中,设置背景图片可以通过<body>标签的style属性或CSS样式来实现，以下是一些常用的方法：
- 使用
style属性
在<body>标签中直接添加style属性，并设置background-image属性。
<body style="background-image: url('background.jpg');">
<!-- 页面内容 -->
</body> 使用内联CSS样式
在<body>标签中添加<style>标签，并设置CSS样式。
<body>
<style>
body {
background-image: url('background.jpg');
}
</style>
<!-- 页面内容 -->
</body> 使用外部CSS样式
将CSS样式保存为外部文件,并在HTML文件中通过<link>标签引入。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 页面内容 -->
</body> style.css如下：
body {
background-image: url('background.jpg');
} 背景图片的属性
background-image
设置背景图片的URL,可以使用相对路径或绝对路径。
body {
background-image: url('background.jpg');
} background-repeat
控制背景图片的重复方式,常用值有no-repeat（不重复）、repeat（重复）、repeat-x（水平重复）、repeat-y（垂直重复）。
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
} background-position
控制背景图片的位置,可以使用百分比值、像素值或top、bottom、left、right等关键字。
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
} background-size
控制背景图片的大小,常用值有cover（覆盖整个元素）、contain（保持图片比例，填充整个元素）、auto（自动调整大小）。
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
} background-attachment
控制背景图片的滚动方式,常用值有scroll（随页面滚动）、fixed（固定位置）。
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
} 相关问答FAQs
Q1：如何设置背景图片的透明度？
A1：可以通过CSS的rgba颜色模式设置背景图片的透明度。
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: rgba(255, 255, 255, 0.5); /* 设置背景颜色为半透明 */
} Q2：如何使背景图片始终居中显示？
A2：可以通过设置background-position属性为center center来实现背景图片的居中显示。
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
} 
