在HTML页面开发中，背景颜色是提升页面视觉效果的基础样式设置，既可以通过纯色填充实现简洁风格，也能通过渐变效果打造更具层次感的页面。设置背景颜色主要依赖CSS的background-color属性，而渐变效果则需要结合background-image属性配合渐变函数实现。
一、background-color属性基础用法
background-color是CSS中用于设置元素背景颜色的核心属性，可作用于几乎所有HTML元素，包括<body>、<div>、<p>等。该属性支持多种颜色值格式，开发者可以根据需求选择合适的格式。
1. 常见颜色值格式
- 颜色关键字：直接使用预定义的颜色名称，比如red、blue、white等，适合快速设置常见颜色。
- 十六进制值：以#开头，后面跟6位十六进制数，前两位表示红色通道，中间两位表示绿色通道，最后两位表示蓝色通道，比如#ff0000表示红色，#ffffff表示白色。
- RGB值：使用rgb(红,绿,蓝)格式，每个通道的取值范围是0到255，比如rgb(255,0,0)表示红色。
- RGBA值：在RGB的基础上增加透明度通道，取值0到1，比如rgba(255,0,0,0.5)表示半透明的红色。
- HSL值：使用hsl(色相,饱和度,亮度)格式，色相取值0到360，饱和度和亮度取值0%到100%，比如hsl(0,100%,50%)表示红色。
2. 基础设置示例
下面是给页面整体和单个div设置背景颜色的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 给整个页面设置浅灰色背景 */
body {
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
/* 给div设置蓝色背景 */
.content-box {
background-color: rgb(64, 158, 255);
width: 300px;
height: 200px;
color: white;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="content-box">蓝色背景的容器</div>
</body>
</html>
二、背景渐变效果实现
如果需要实现两种或多种颜色过渡的背景效果，就需要使用CSS渐变，渐变本质是背景图片，因此需要通过background-image属性设置，常用的渐变类型有线性渐变和径向渐变。
1. 线性渐变（linear-gradient）
线性渐变是颜色沿着一条直线方向过渡的效果，默认方向是从上到下，也可以通过参数指定渐变方向。
基础语法：<code>linear-gradient(渐变方向, 颜色1 位置1, 颜色2 位置2, ...)</code>
渐变方向可以是关键字（to top、to right、to bottom right等），也可以是角度值（比如45deg表示45度方向）。
下面是不同线性渐变效果的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.gradient-box {
width: 300px;
height: 150px;
margin-bottom: 20px;
color: white;
text-align: center;
line-height: 150px;
}
/* 默认从上到下的渐变 */
.linear-1 {
background-image: linear-gradient(red, yellow);
}
/* 从左到右的渐变 */
.linear-2 {
background-image: linear-gradient(to right, #409eff, #67c23a);
}
/* 45度方向的渐变，指定颜色位置 */
.linear-3 {
background-image: linear-gradient(45deg, rgba(255,0,0,0.8) 0%, rgba(0,255,0,0.8) 50%, rgba(0,0,255,0.8) 100%);
}
</style>
</head>
<body>
<div class="gradient-box linear-1">默认线性渐变</div>
<div class="gradient-box linear-2">从左到右渐变</div>
<div class="gradient-box linear-3">45度三色渐变</div>
</body>
</html>
2. 径向渐变（radial-gradient）
径向渐变是颜色从中心点向外扩散过渡的效果，默认中心点是元素中心，形状是椭圆，也可以自定义形状和大小。
基础语法：<code>radial-gradient(形状 大小 at 中心点位置, 颜色1 位置1, 颜色2 位置2, ...)</code>
形状可选circle（圆形）或ellipse（椭圆），大小可以是关键字（closest-side、farthest-corner等）或者具体数值，中心点位置可以用像素或者百分比表示。
径向渐变示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.radial-box {
width: 300px;
height: 300px;
margin-bottom: 20px;
color: white;
text-align: center;
line-height: 300px;
}
/* 默认径向渐变 */
.radial-1 {
background-image: radial-gradient(red, yellow, green);
}
/* 圆形径向渐变，中心点在左上角 */
.radial-2 {
background-image: radial-gradient(circle at 20% 20%, #409eff, #f56c6c);
}
</style>
</head>
<body>
<div class="radial-box radial-1">默认径向渐变</div>
<div class="radial-box radial-2">左上角圆形渐变</div>
</body>
</html>
三、注意事项
- 如果同时设置了background-color和background-image，渐变图片会覆盖在背景颜色之上，当渐变图片无法覆盖元素全部区域时，背景颜色会作为 fallback 显示。
- 渐变属于CSS3特性，在部分非常老旧的浏览器中可能无法正常显示，实际开发时可以根据需求添加兼容性前缀，比如-webkit-linear-gradient、-moz-linear-gradient等。
- 颜色位置的取值可以是百分比或者具体像素，不设置的话浏览器会自动均匀分布颜色过渡位置。
HTMLbackground-colorCSS渐变线性渐变径向渐变修改时间：2026-07-20 15:12:30