当前位置：首页 > news >正文

CSS背景属性详解

news 2026/7/16 23:00:45

一、背景颜色（background-color）

1.1 基本语法

background-color: 颜色值;

1.2 示例

.box1 { background-color: pink; background-color: #bfa; }

1.3 特点

特性	说明
作用范围	可以为元素设置背景颜色
与背景图片的关系	可以同时设置背景颜色和背景图片，背景颜色将作为背景图片的底色

二、背景图片（background-image）

2.1 基本语法

background-image: url(图片路径);

2.2 图片显示规则

图片与元素大小关系	默认显示效果
图片大于元素	默认显示图片左上角
图片等于元素	完整显示整个图片
图片小于元素	默认平铺以充满元素

三、背景重复（background-repeat）

3.1 可选值

值	描述
`repeat`	默认值，双向平铺
`no-repeat`	不重复，显示原图大小
`repeat-x`	水平方向重复
`repeat-y`	垂直方向重复

3.2 示例

background-repeat: no-repeat; /* 不重复 */ background-repeat: repeat-x; /* 水平平铺 */ background-repeat: repeat-y; /* 垂直平铺 */

四、背景位置（background-position）

4.1 关键字用法

background-position: top left; /* 左上角 */ background-position: top right; /* 右上角 */ background-position: bottom left; /* 左下角 */ background-position: bottom right; /* 右下角 */ background-position: center; /* 居中（单值） */ background-position: top; /* 顶部居中 */ background-position: left; /* 左侧居中 */

4.2 偏移量用法

background-position: 10px 10px; /* 水平10px，垂直10px（正值向右向下） */ background-position: -10px -10px; /* 向左10px，向上10px（负值向左向上） */ background-position: 50% 50%; /* 百分比定位 */

五、背景范围（background-clip）

5.1 可选值

值	描述
`border-box`	默认值，背景延伸到边框外边缘
`padding-box`	背景出现在内容区和内边距区域
`content-box`	背景只出现在内容区

5.2 示例

background-clip: border-box; /* 默认，背景覆盖到边框 */ background-clip: padding-box; /* 背景覆盖到内边距 */ background-clip: content-box; /* 背景只在内容区 */

六、背景原点（background-origin）

6.1 可选值

值	描述
`padding-box`	默认值，从内边距开始计算偏移量
`content-box`	从内容区开始计算偏移量
`border-box`	从边框开始计算偏移量

6.2 示例

background-origin: border-box; /* 从边框开始定位 */ background-origin: padding-box; /* 从内边距开始定位（默认） */ background-origin: content-box; /* 从内容区开始定位 */

七、背景尺寸（background-size）

7.1 具体值用法

background-size: 100px 100px; /* 宽高具体值 */ background-size: 100px; /* 宽度100px，高度auto */ background-size: 50% 50%; /* 百分比 */

7.2 关键字用法

值	描述
`cover`	覆盖整个元素，保持比例（可能裁剪图片）
`contain`	完整显示图片，保持比例（可能有留白）

background-size: cover; /* 覆盖整个元素 */ background-size: contain; /* 完整显示图片 */

八、背景简写（background）

8.1 语法特点

background: [颜色] [图片] [位置/尺寸] [重复] [原点] [裁剪];

8.2 示例

background: no-repeat red url(./img/小图.webp) 50px 50px/cover;

8.3 注意事项

注意点	说明
顺序要求	没有严格的顺序要求
默认值	未设置的属性使用默认值
尺寸位置	`background-size`必须写在`background-position`后面，用`/`分隔

九、雪碧图技术（CSS Sprite）

9.1 什么是雪碧图

雪碧图是将多个小图标整合到一张大图中，通过背景定位显示所需图标的技术。

9.2 优点

优势	说明
减少请求次数	多个图片整合为一张，只需一次HTTP请求
提高加载速度	减小总图片大小，加快请求速度

9.3 使用步骤

第一步：确定要使用的图标在雪碧图中的位置 第二步：测量图标的宽高尺寸 第三步：创建相应尺寸的元素 第四步：将雪碧图设置为背景图片 第五步：设置偏移量显示正确的图标

9.4 示例

.box { width: 60px; /* 图标宽度 */ height: 60px; /* 图标高度 */ background-image: url(./亚马逊精灵图.png); /* 雪碧图路径 */ background-position: -273px -670px; /* 偏移到目标图标 */ }

十、渐变背景

10.1 线性渐变（linear-gradient）

/* 方向渐变 */ background-image: linear-gradient(to bottom, red, yellow); /* 角度渐变 */ background-image: linear-gradient(45deg, red, yellow); /* 多色指定位置 */ background-image: linear-gradient(to right, red 10%, green 50%, blue 75%);

10.2 重复线性渐变（repeating-linear-gradient）

background-image: repeating-linear-gradient(to bottom, red 0%, yellow 20%);

10.3 径向渐变（radial-gradient）

/* 基本径向渐变 */ background-image: radial-gradient(red, yellow); /* 指定圆心和大小 */ background-image: radial-gradient(100px 100px at 100px 0px, red, yellow);

10.4 重复径向渐变（repeating-radial-gradient）

background-image: repeating-radial-gradient(red 0%, yellow 30%);

10.5 渐变重要提示

要点	说明
渐变属于图片	通过`background-image`设置，而非`background-color`
颜色分布	默认均分，可手动指定位置百分比
性能优化	雪碧图技术可显著提高网站性能

十一、属性速查表

属性	作用	常用值
`background-color`	背景颜色	`red`、`#fff`、`rgb()`
`background-image`	背景图片	`url(路径)`
`background-repeat`	背景重复	`no-repeat`、`repeat-x`、`repeat-y`
`background-position`	背景位置	`center`、`10px 20px`
`background-clip`	背景范围	`border-box`、`padding-box`、`content-box`
`background-origin`	背景原点	`border-box`、`padding-box`、`content-box`
`background-size`	背景尺寸	`cover`、`contain`、`100px 100px`