CSS背景知识大全
编程小白也能看懂的CSS背景属性详解 – 附带示例和代码
1. 背景颜色 (background-color)
解释： 给元素设置一个纯色背景，就像给手机换一个单色壁纸一样简单。
这是一个纯色背景
.element {
background-color: #3498db;
/* 也可以使用颜色名称 */
background-color: blue;
/* 或RGBA颜色（带透明度） */
background-color: rgba(52, 152, 219, 0.7);
}
background-color: #3498db;
/* 也可以使用颜色名称 */
background-color: blue;
/* 或RGBA颜色（带透明度） */
background-color: rgba(52, 152, 219, 0.7);
}
💡 小贴士：使用RGBA颜色可以制作半透明背景，不会影响文字颜色
2. 背景图片 (background-image)
解释： 设置元素背景为一张图片，就像给手机设置自定义壁纸。
背景是一张图片
.element {
background-image: url(‘path/to/image.jpg’);
/* 也可以使用渐变 */
background-image: linear-gradient(red, yellow);
}
background-image: url(‘path/to/image.jpg’);
/* 也可以使用渐变 */
background-image: linear-gradient(red, yellow);
}
💡 小贴士：背景图片默认会重复铺满整个元素（就像瓷砖一样）
3. 背景重复 (background-repeat)
解释： 控制背景图片是否重复以及如何重复。
默认重复背景
.element {
background-repeat: repeat; /* 默认值，水平和垂直重复 */
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 仅水平重复 */
background-repeat: repeat-y; /* 仅垂直重复 */
background-repeat: space; /* 重复但留空白间距 */
}
background-repeat: repeat; /* 默认值，水平和垂直重复 */
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 仅水平重复 */
background-repeat: repeat-y; /* 仅垂直重复 */
background-repeat: space; /* 重复但留空白间距 */
}
💡 小贴士：no-repeat常用于设置logo背景或大图背景
4. 背景位置 (background-position)
解释： 控制背景图片在元素中的位置。
背景图片居中
.element {
background-position: center; /* 居中 */
background-position: top left; /* 左上角 */
background-position: bottom right; /* 右下角 */
background-position: 20px 50px; /* 距左20px，距顶50px */
background-position: 70% 30%; /* 相对位置 */
}
background-position: center; /* 居中 */
background-position: top left; /* 左上角 */
background-position: bottom right; /* 右下角 */
background-position: 20px 50px; /* 距左20px，距顶50px */
background-position: 70% 30%; /* 相对位置 */
}
💡 小贴士：组合使用background-position和background-size可以精确控制图片位置
5. 背景尺寸 (background-size)
解释： 控制背景图片的尺寸大小。
cover – 覆盖整个容器
.element {
background-size: 200px 100px; /* 宽和高 */
background-size: 50% 80%; /* 相对容器尺寸百分比 */
background-size: cover; /* 保持比例覆盖整个容器 */
background-size: contain; /* 保持比例完整显示在容器内 */
}
background-size: 200px 100px; /* 宽和高 */
background-size: 50% 80%; /* 相对容器尺寸百分比 */
background-size: cover; /* 保持比例覆盖整个容器 */
background-size: contain; /* 保持比例完整显示在容器内 */
}
💡 小贴士：cover常用于全屏背景图，contain常用于小图标
解释： 控制背景图片是否随页面滚动。
滚动我试试 (模拟fixed效果)
背景图片固定不动
继续滚动…
背景图片固定不动
继续滚动…
.element {
background-attachment: scroll; /* 默认，随内容滚动 */
background-attachment: fixed; /* 固定相对于视口 */
background-attachment: local; /* 随元素内容滚动 */
}
background-attachment: scroll; /* 默认，随内容滚动 */
background-attachment: fixed; /* 固定相对于视口 */
background-attachment: local; /* 随元素内容滚动 */
}
💡 小贴士：fixed常用于创建视差滚动效果
7. 背景原点与剪裁 (origin & clip)
解释： 控制背景的起始位置和绘制区域。
border-box (默认)
/* 背景原点 */
.element {
background-origin: border-box; /* 从边框开始绘制 */
background-origin: padding-box; /* 从内边距开始 */
background-origin: content-box; /* 从内容开始 */
}
/* 背景剪裁 */
.element {
background-clip: border-box; /* 默认，延伸到边框 */
background-clip: padding-box; /* 延伸到内边距 */
background-clip: content-box; /* 只在内容区域 */
background-clip: text; /* 只在文字内部 */
}
.element {
background-origin: border-box; /* 从边框开始绘制 */
background-origin: padding-box; /* 从内边距开始 */
background-origin: content-box; /* 从内容开始 */
}
/* 背景剪裁 */
.element {
background-clip: border-box; /* 默认，延伸到边框 */
background-clip: padding-box; /* 延伸到内边距 */
background-clip: content-box; /* 只在内容区域 */
background-clip: text; /* 只在文字内部 */
}
💡 小贴士：background-clip: text; 可以创建文字填充效果
8. 渐变背景 (gradient)
解释： 创建颜色平滑过渡的背景效果。
线性渐变 (linear-gradient)
径向渐变 (radial-gradient)
/* 线性渐变 */
.element {
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, blue, green);
}
/* 径向渐变 */
.element {
background: radial-gradient(circle, red, yellow);
background: radial-gradient(ellipse at top, blue, transparent);
}
.element {
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, blue, green);
}
/* 径向渐变 */
.element {
background: radial-gradient(circle, red, yellow);
background: radial-gradient(ellipse at top, blue, transparent);
}
💡 小贴士：可以创建多个色标的复杂渐变，甚至重复渐变
9. 多重背景
解释： 在一个元素上添加多个背景层。
多张图片+渐变背景
.element {
background:
url(‘image1.png’) top left no-repeat,
url(‘image2.png’) bottom right no-repeat,
linear-gradient(to bottom, #4facfe, #00f2fe);
}
background:
url(‘image1.png’) top left no-repeat,
url(‘image2.png’) bottom right no-repeat,
linear-gradient(to bottom, #4facfe, #00f2fe);
}
💡 小贴士：先列出的背景层会显示在上层（覆盖下面的背景）
10. 背景简写 (background)
解释： 用一个属性设置所有背景属性。
简写背景属性
.element {
background: #3498db; /* 仅背景色 */
background: url(‘image.jpg’) no-repeat; /* 背景图 */
background: url(‘image.jpg’) left top/cover no-repeat fixed; /* 完整形式 */
}
background: #3498db; /* 仅背景色 */
background: url(‘image.jpg’) no-repeat; /* 背景图 */
background: url(‘image.jpg’) left top/cover no-repeat fixed; /* 完整形式 */
}
💡 小贴士：简写时顺序不重要，但建议顺序：color image position/size repeat attachment origin clip