css背景制作
CSS背景制作方法
背景颜色设置
使用background-color属性设置纯色背景，支持颜色名称、十六进制、RGB或HSL值：
div {
background-color: #f0f0f0;
}背景图片设置
通过background-image属性添加图片，建议同时设置备用背景色：
section {
background-image: url("texture.jpg");
background-color: lightgray;
}背景重复控制
background-repeat控制图片平铺方式，常用值包括：
.banner {
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 水平重复 */
}背景定位调整
使用background-position精确控制图片位置：
header {
background-position: center top; /* 水平居中 顶部对齐 */
background-position: 20px 50%; /* 水平20px 垂直50% */
}背景尺寸设置
background-size调整图片显示尺寸：
.hero {
background-size: cover; /* 覆盖整个区域 */
background-size: contain; /* 完整显示图片 */
background-size: 50% auto; /* 自定义尺寸 */
}多重背景叠加 CSS3支持多背景图层叠加，用逗号分隔不同层：
.card {
background:
linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url("overlay.png"),
url("base.jpg");
}渐变背景创建
使用linear-gradient或radial-gradient创建渐变效果：
.gradient-bg {
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
background: radial-gradient(circle, #a1c4fd, #c2e9fb);
}背景附着方式
background-attachment控制滚动行为：
.parallax {
background-attachment: fixed; /* 固定背景 */
background-attachment: local; /* 随元素内容滚动 */
}背景混合模式
background-blend-mode实现图层混合效果：
.blend {
background-image: url("image.png");
background-color: blue;
background-blend-mode: multiply;
}性能优化建议
- 使用CSS渐变替代小尺寸平铺图片
- 对大图启用
background-size: cover避免失真 - 考虑使用
will-change: background促进硬件加速
