CSS3背景知识详解
编程小白也能轻松理解的背景属性指南，附带示例代码和效果演示
背景颜色 (background-color)
通俗解释
就像给墙上刷油漆一样，background-color 属性让你可以给元素设置背景颜色。
/* 基本用法 */
.element {
background-color: #3498db; /* 蓝色背景 */
}
/* 其他表示方式 */
.element {
background-color: rgb(52, 152, 219); /* RGB格式 */
background-color: rgba(52, 152, 219, 0.7); /* 带透明度 */
background-color: hsl(204, 70%, 53%); /* HSL格式 */
}
这个区域使用了背景颜色 #3498db
注意： 背景色默认会延伸到边框下面（border下面），可以使用background-clip调整
背景图片 (background-image)
通俗解释
就像在墙上贴壁纸，background-image 可以给元素设置背景图片。
/* 设置背景图片 */
.element {
background-image: url(‘path/to/image.jpg’);
}
/* 同时设置多个背景（CSS3） */
.element {
background-image:
url(‘image1.png’),
url(‘image2.png’);
}
/* 使用渐变作为背景 */
.element {
background-image: linear-gradient(red, yellow);
}
这个区域使用了背景图片
提示： 默认情况下背景图片会重复铺满整个元素，可以通过background-repeat控制
背景重复 (background-repeat)
通俗解释
控制背景图片是否重复以及如何重复，就像壁纸的铺贴方式。
/* 常用值 */
.element {
background-repeat: repeat; /* 默认，横向纵向都重复 */
background-repeat: repeat-x; /* 只横向重复 */
background-repeat: repeat-y; /* 只纵向重复 */
background-repeat: no-repeat; /* 不重复 */
background-repeat: space; /* 图片不裁剪，均匀分布 */
background-repeat: round; /* 图片缩放以适应空间 */
}
背景图片重复铺满
注意： 当使用多个背景时，每个背景可以有自己的重复设置，用逗号分隔
背景定位 (background-position)
通俗解释
决定背景图片在元素中的位置，就像调整墙上的挂画位置。
/* 关键字定位 */
.element {
background-position: center; /* 居中 */
background-position: left top; /* 左上角 */
background-position: right bottom; /* 右下角 */
}
/* 精确像素定位 */
.element {
background-position: 20px 50px; /* 水平20px 垂直50px */
background-position: 30% 70%; /* 水平30% 垂直70% */
}
/* 四个值语法（CSS3） */
.element {
background-position: right 20px bottom 10px; /* 距右边20px，底边10px */
}
背景图片居中显示
提示： 默认位置是左上角 (0 0)，百分比值是基于元素尺寸减去图片尺寸
背景尺寸 (background-size)
通俗解释
就像调整图片大小一样，控制背景图片的尺寸。
/* 关键字值 */
.element {
background-size: cover; /* 覆盖整个区域，保持比例 */
background-size: contain; /* 图片完整显示，保持比例 */
}
/* 指定具体尺寸 */
.element {
background-size: 100px 150px; /* 宽100px, 高150px */
background-size: 50% 80%; /* 宽50%, 高80% */
background-size: 100px auto; /* 宽100px, 高度自适应 */
background-size: auto 150px; /* 高度150px, 宽度自适应 */
}
/* 多个背景的不同尺寸 */
.element {
background-size: 100px 100px, cover;
}
背景图片使用cover模式
注意： 使用contain时可能有空白区域，cover可能裁剪图片边缘
背景固定 (background-attachment)
通俗解释
决定背景图片是随内容滚动还是固定在视口中。
.element {
background-attachment: scroll; /* 默认，背景随内容滚动 */
background-attachment: fixed; /* 背景固定在视口 */
background-attachment: local; /* 背景随元素内容滚动 */
}
向下滚动查看效果 → 背景图片随内容滚动 (scroll)
向下滚动查看效果 → 背景图片随内容滚动 (scroll)
向下滚动查看效果 → 背景图片随内容滚动 (scroll)
向下滚动查看效果 → 背景图片随内容滚动 (scroll)
向下滚动查看效果 → 背景图片随内容滚动 (scroll)
提示： fixed常用于创建视差滚动效果，但移动端支持有限
背景原点 (background-origin)
通俗解释
决定背景图片从哪个区域开始定位。
.element {
background-origin: border-box; /* 从边框区域开始 */
background-origin: padding-box; /* 从内边距区域开始（默认） */
background-origin: content-box; /* 从内容区域开始 */
}
背景原点设置为content-box
图片在内容区域左上角
图片在内容区域左上角
注意： 通常与background-position结合使用，当元素有边框和内边距时效果明显
背景裁切 (background-clip)
通俗解释
控制背景（颜色或图片）延伸到哪些区域。
.element {
background-clip: border-box; /* 延伸到边框（默认） */
background-clip: padding-box; /* 延伸到内边距 */
background-clip: content-box; /* 只在内容区域显示 */
background-clip: text; /* 只在文字区域显示（需前缀） */
}
背景裁切设置为content-box
背景只在内容区域显示
背景只在内容区域显示
提示： background-clip: text可以创建文字填充效果（需要webkit前缀）
渐变背景 (linear-gradient/radial-gradient)
通俗解释
创建平滑过渡的颜色渐变背景。
/* 线性渐变 */
.element {
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to right, #ff9a9e, #fad0c4);
background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);
}
/* 径向渐变 */
.element {
background: radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle at top left, white, blue);
}
/* 重复渐变 */
.element {
background: repeating-linear-gradient(45deg, yellow 0px, yellow 10px, black 10px, black 20px);
}
动态渐变背景 (45°方向)
提示： 渐变可以创建复杂背景而不需要图片，节省HTTP请求
多重背景 (Multiple Backgrounds)
通俗解释
CSS3允许在一个元素上叠加多个背景，就像多层透明胶片。
.element {
background-image:
url(‘top-layer.png’),
url(‘middle-layer.png’),
linear-gradient(to bottom, blue, green);
background-position:
top left,
center center,
center center;
background-repeat:
no-repeat,
no-repeat,
no-repeat;
background-size:
100px 100px,
cover,
cover;
}
左上角和右下角有小图
背景是蓝紫渐变
背景是蓝紫渐变
注意： 多个背景时，第一个背景在最上层，最后一个在最底层