CSS3背景与渐变
背景颜色基础知识
使用 background-color 设置元素的背景颜色。
基本语法：
.box { background-color: red;}常用属性值：
| 属性值 | 说明 | 示例 |
|---|---|---|
| 颜色名称 | 使用英文颜色名称 | red |
| HEX | 十六进制颜色 | #ff0000 |
| RGB | 红、绿、蓝三通道 | rgb(255 0 0) |
| RGBA | RGB 颜色与透明度 | rgba(255, 0, 0, 0.5) |
| HSL | 色相、饱和度、亮度 | hsl(0 100% 50%) |
transparent | 完全透明 | transparent |
注意：
background-color默认值是transparent。- 背景颜色不会被子元素直接继承。
- 背景颜色通常覆盖元素的内容区、内边距和边框区域，但实际绘制范围可以由
background-clip控制。
背景图片基础知识
使用 background-image 设置元素的背景图片。
基本语法：
.box { width: 500px; height: 300px; background-image: url("/images/bg.jpg");}| 属性值 | 说明 |
|---|---|
none | 不使用背景图片，默认值 |
url() | 指定背景图片地址 |
linear-gradient() | 线性渐变背景 |
radial-gradient() | 径向渐变背景 |
背景图片与背景颜色同时使用：
.box { background-color: #eee; background-image: url("/images/bg.jpg");}图片绘制在背景颜色上方，透明的图片区域可以显示下方的背景颜色。
注意： 背景图片默认会按照原始尺寸显示，并且平铺重复，不会自动铺满容器。
背景图片的重复模式
使用 background-repeat 控制背景图片是否重复。
基本语法：
.box { background-image: url("/images/bg.jpg"); background-repeat: no-repeat;}| 属性值 | 说明 |
|---|---|
repeat | 水平和垂直重复，默认值 |
no-repeat | 不重复 |
repeat-x | 只沿水平方向重复 |
repeat-y | 只沿垂直方向重复 |
space | 完整图片均匀排列，尽可能分配间距 |
round | 调整图片尺寸，让重复图片刚好铺满 |
在现代网页开发中，背景图通常搭配 no-repeat，例如网站 Banner、卡片背景等。小纹理背景则可以使用 repeat。
背景尺寸
使用 background-size 设置背景图片的显示尺寸。
基本语法：
.box { background-image: url("/images/bg.jpg"); background-size: cover;}| 属性值 | 说明 |
|---|---|
auto | 保持图片原始尺寸或自动比例，默认值 |
cover | 保持比例，覆盖整个容器，可能裁掉部分图片 |
contain | 保持比例，完整显示图片，可能留白 |
100% 100% | 强制填满容器，可能导致图片变形 |
200px 100px | 指定宽度和高度 |
50% auto | 宽度为背景定位区域的 50%，高度自动等比缩放 |
实际开发中，最常使用的是：
.banner { background-size: cover; background-repeat: no-repeat;}背景裁切
使用 background-clip 控制背景的绘制范围。
基本语法：
.box { background-color: skyblue; background-clip: padding-box;}| 属性值 | 说明 |
|---|---|
border-box | 背景绘制到边框区域，默认值 |
padding-box | 背景只绘制到内边距边缘，不延伸到边框区域 |
content-box | 背景只绘制在内容区域 |
text | 背景通过文字形状显示 |
文字渐变的典型用法：
.title { background: linear-gradient(to right, red, blue); background-clip: text; color: transparent;}注意：background-clip 控制的是背景绘制区域，并不是直接调整图片的大小。另外还有 background-origin，用于控制背景图片定位时的参考区域，默认是 padding-box。不要和 background-clip 混淆
背景固定
使用 background-attachment 控制背景图片如何随着滚动发生变化。
基本语法：
.box { background-image: url("/images/bg.jpg"); background-attachment: fixed;}| 属性值 | 说明 |
|---|---|
scroll | 背景跟随元素移动，不随元素内部内容滚动，默认值 |
fixed | 背景相对视口固定 |
local | 背景随元素内部的滚动内容一起移动 |
常见用法：页面固定背景
body { background-image: url("/images/bg.jpg"); background-size: cover; background-attachment: fixed;}页面滚动时，背景相对于浏览器视口保持固定，可以实现一些固定背景视觉效果。
注意：fixed 在部分移动端浏览器中存在兼容性和显示行为差异，正式项目中需要测试。
背景图片位置
使用 background-position 控制背景图片在元素中的位置。
基本语法：
.box { background-image: url("/images/bg.jpg"); background-position: center center;}| 属性值 | 说明 |
|---|---|
left top | 左上角，默认位置 |
center center | 水平、垂直居中 |
right bottom | 右下角 |
center top | 水平居中，垂直顶部 |
50% 50% | 水平、垂直居中 |
20px 40px | 按水平、垂直偏移量定位 |
right 20px bottom 10px | 距右边 20px，距底部 10px |
重点： background-position: 50% 50% 并不是把图片左上角放在容器中心，而是让图片自身的 50% 位置与容器的 50% 位置对齐，从而实现居中。
背景图通常会搭配下面的写法：
.box { background-size: cover; background-position: center; background-repeat: no-repeat;}background综合属性
background 是复合属性，可以在一条 CSS 声明中设置多个背景属性。
基本语法：
.box { background: #eee url("/images/bg.jpg") center / cover no-repeat fixed;}这条代码相当于：
.box { background-color: #eee; background-image: url("/images/bg.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}常用背景属性汇总：
| 属性 | 作用 | 默认值 |
|---|---|---|
background-color | 背景颜色 | transparent |
background-image | 背景图片 | none |
background-repeat | 图片重复 | repeat |
background-size | 图片尺寸 | auto auto |
background-clip | 背景裁切 | border-box |
background-attachment | 背景滚动行为 | scroll |
background-position | 图片位置 | 0% 0% |
background-origin | 背景定位区域 | padding-box |
注意三个问题：
background不要求所有值遵循唯一固定顺序，但background-size必须紧跟在background-position后面，并使用/分隔。- 使用
background简写会重置未指定的背景子属性。 - 可以使用逗号设置多个背景图层，前面声明的图层显示在上方。
例如：
.box { background: linear-gradient(to right, #0008, transparent), url("/images/bg.jpg") center / cover no-repeat;}这段代码在背景图片上覆盖了一层半透明渐变，常用于 Banner 上的文字可读性处理。
线性渐变
使用 linear-gradient() 创建沿某个方向逐渐变化的颜色背景。
注意：linear-gradient() 是 CSS 图像函数，而不是独立的 CSS 属性。
基本语法：
.box { background-image: linear-gradient(to right, red, blue);}渐变方向
| 方向 | 说明 |
|---|---|
to right | 从左到右 |
to left | 从右到左 |
to bottom | 从上到下，默认 |
to top | 从下到上 |
to bottom right | 从左上到右下 |
45deg | 使用角度指定渐变方向 |
角度规则：0deg 指向上方、90deg 指向右方、180deg 指向下方、270deg 指向左方。
多颜色渐变
.box { background: linear-gradient( to right, red, yellow, green, blue );}指定颜色位置
.box { background: linear-gradient( to right, red 0%, yellow 30%, blue 100% );}red 0%：红色位于渐变起点。yellow 30%：黄色位于渐变路径的 30% 位置。blue 100%：蓝色位于渐变终点。
径向渐变
使用 radial-gradient() 创建从某个中心点向四周扩散的渐变。
基本语法：
.box { background: radial-gradient(red, blue);}与线性渐变不同，径向渐变的颜色并不是沿直线变化，而是向周围扩散。
常用属性值
| 属性值 | 说明 |
|---|---|
circle | 圆形渐变 |
ellipse | 椭圆形渐变，默认形状 |
at center | 渐变中心位于元素中心，默认 |
at top left | 渐变中心位于左上角 |
at 30% 70% | 自定义渐变中心位置 |
closest-side | 渐变末端到距离中心最近的边 |
farthest-side | 渐变末端到距离中心最远的边 |
closest-corner | 渐变末端到距离中心最近的角 |
farthest-corner | 渐变末端到距离中心最远的角，默认 |
自定义径向渐变
.box { background: radial-gradient( circle at 30% 40%, red 0%, yellow 40%, blue 100% );}代码说明：
circle：渐变形状为圆形。at 30% 40%：渐变中心位于水平 30%、垂直 40% 的位置。red 0%：中心起点为红色。yellow 40%：渐变路径的 40% 位置为黄色。blue 100%：终点为蓝色。
总结：CSS 背景属性速记
| 需求 | 推荐写法 |
|---|---|
| 设置背景颜色 | background-color: #fff |
| 设置背景图片 | background-image: url(...) |
| 禁止背景重复 | background-repeat: no-repeat |
| 图片完整显示 | background-size: contain |
| 图片铺满容器 | background-size: cover |
| 只在内容区域绘制背景 | background-clip: content-box |
| 固定背景 | background-attachment: fixed |
| 图片水平垂直居中 | background-position: center |
| 背景综合设置 | background: url(...) center / cover no-repeat |
| 线性渐变 | linear-gradient(to right, red, blue) |
| 径向渐变 | radial-gradient(circle, red, blue) |
实际开发最值得优先掌握的组合：
/* 网站 Banner */.banner { height: 400px; background: url("/images/banner.jpg") center / cover no-repeat;}
/* 卡片渐变背景 */.card { background: linear-gradient(135deg, #667eea, #764ba2);}
/* 渐变文字 */.title { background: linear-gradient(to right, #00c6ff, #0072ff); background-clip: text; color: transparent;}文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！