在制作html个人页面时，背景设置是提升页面视觉效果的重要环节，既可以通过设置纯色背景让页面简洁清爽，也可以添加背景图让页面更具个性化。背景相关的设置主要通过CSS的background系列属性实现，不同的设置方式适用于不同的场景。
一、html背景色设置方法
设置背景色使用background-color属性，支持多种色值格式，常见的有以下几种：
- 十六进制色值：如
#ffffff表示白色，#000000表示黑色 - rgb色值：如
rgb(255,255,255)表示白色，数值范围是0到255 - 颜色英文名称：如
red、blue、green等基础颜色 - rgba色值：如
rgba(255,0,0,0.5)，最后一个参数表示透明度，范围是0到1
1. 内联样式设置背景色
直接在html标签的style属性中添加background-color即可，这种方式优先级最高，仅对当前标签生效。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人页面</title>
</head>
<body style="background-color: #f5f5f5;">
<div style="background-color: rgb(173,216,230); width: 200px; height: 100px;">
这是一个浅蓝色的区块
</div>
</body>
</html>
2. 内部样式表设置背景色
在<head>标签内的<style>标签中定义样式，可以统一设置多个元素的背景色，适合页面整体风格统一调整。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人页面</title>
<style>
/* 设置整个页面背景为浅灰色 */
body {
background-color: #e8e8e8;
}
/* 设置类名为content的区块背景为白色 */
.content {
background-color: rgba(255,255,255,0.9);
width: 80%;
margin: 20px auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
这是个人页面的内容区域
</div>
</body>
</html>
二、html背景图设置方法
设置背景图使用background-image属性，需要指定图片的路径，路径可以是相对路径、绝对路径或者网络图片地址。同时可以配合其他background属性调整背景图的显示效果。
1. 基础背景图设置
使用background-image: url(图片路径)即可添加背景图，默认情况下背景图会横向和纵向平铺。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人页面</title>
<style>
body {
/* 设置背景图，图片放在images文件夹下 */
background-image: url(images/bg.jpg);
}
</style>
</head>
<body>
<h1>我的个人主页</h1>
</body>
</html>
2. 背景图常用调整属性
为了让背景图显示效果更符合需求，通常会配合以下属性一起使用：
background-repeat：设置背景图是否平铺，可选值有repeat（默认，双向平铺）、no-repeat（不平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）background-position：设置背景图的位置，可选值有left、right、center、top、bottom，也可以用像素值或百分比指定background-size：设置背景图的尺寸，可选值有cover（覆盖整个容器，可能裁剪图片）、contain（完整显示图片，可能留空白）、具体像素值或百分比background-attachment：设置背景图是否随页面滚动，可选值有scroll（默认，随滚动条滚动）、fixed（固定不随滚动条滚动）
3. 完整背景图设置示例
下面是一个综合使用多个背景属性的示例，实现背景图居中、覆盖整个页面、固定不随滚动条滚动的效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人页面</title>
<style>
body {
/* 背景图路径 */
background-image: url(https://ipipp.com/bg.png);
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 背景图居中显示 */
background-position: center center;
/* 背景图覆盖整个页面 */
background-size: cover;
/* 背景图固定不随滚动条滚动 */
background-attachment: fixed;
/* 同时设置备用背景色，图片加载失败时显示 */
background-color: #333333;
height: 2000px; /* 增加页面高度方便查看滚动效果 */
}
.header {
color: white;
text-align: center;
padding-top: 100px;
}
</style>
</head>
<body>
<div class="header">
<h1>欢迎来到我的个人主页</h1>
<p>向下滚动查看背景固定效果</p>
</div>
</body>
</html>
三、背景属性简写方式
如果同时设置多个背景相关属性，可以使用background简写属性，顺序没有严格要求，通常会按照背景色、背景图、平铺方式、位置、尺寸、滚动方式的顺序书写，不需要设置的属性可以省略。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人页面</title>
<style>
.box {
width: 500px;
height: 300px;
/* 简写背景属性：背景色 背景图 不平铺 居中 覆盖 固定 */
background: #f0f0f0 url(images/photo.jpg) no-repeat center center/cover fixed;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
四、注意事项
- 背景图的路径要正确，相对路径是相对于当前html文件的位置，网络图片需要保证地址可访问
- 如果同时设置了背景色和背景图，背景图会覆盖在背景色上方，背景色会在背景图加载失败或者背景图有透明区域时显示
- 设置背景图尺寸为cover时，要注意图片的比例，避免重要内容被裁剪
- 本地测试时如果使用相对路径，要确保图片文件和html文件在同一目录或者正确嵌套在子目录中
htmlbackground_colorbackground_imageCSS样式修改时间：2026-07-21 07:57:14