CSS 背景与渐变样式指南
一、背景色与背景图基础
.box1 { width: 300px; height: 300px; border: 10px double black; padding: 30px; margin: 0 auto; }1. 背景色设置
background-color: #74985d;2. 背景图片设置
background-image: url(./img/小图.webp); /* 图片尺寸说明： - 小于盒子时默认平铺 - 大于盒子时显示左上角部分 */ background-image: url(./img/大图2.webp);3. 图片重复方式控制
background-repeat: no-repeat; /* 可选值： - repeat（默认） - no-repeat - repeat-x - repeat-y */4. 背景图位置调整
background-position: 100px; /* 参数格式： 参数1：水平方向（px/left/center/right） 参数2：垂直方向（px/top/center/bottom） */5. 背景图尺寸调整
background-size: cover; /* 特殊值说明： - cover：完全覆盖盒子 - contain：完整显示图片 */二、背景裁剪与背景原点
.box1 {
1：控制背景色延伸范围
background-color: #bfa;
background-clip: content-box; /* 可选值：border-box(默认)、padding-box、content-box */
background-image: url(./img/小图.webp);
background-repeat: no-repeat;
background-position: 0px 0px;
2：设置背景偏移量计算原点
background-origin: content-box; /* 可选值：border-box、padding-box(默认)、content-box */
}
属性对比总结
| 属性 | 功能 | 常见取值 | 默认值 |
|---|---|---|---|
background-clip | 背景绘制范围 | border-box/padding-box/content-box | border-box |
background-origin | 背景偏移起点 | border-box/padding-box/content-box | padding-box |
三、background 复合属性简写
.box1 { background: #f60 url(./img/小图.webp) no-repeat padding-box border-box 100px 100px / 200px 200px; }语法规则：
background: color image repeat origin clip position / size;
注意：background-size必须写在position后，用"/"分隔 */
四、雪碧图(CSS Sprite)技术
雪碧图优势
1. 整合多个小图标为单张图片，减少HTTP请求
2. 提升页面加载性能
3. 改善用户体验
使用步骤
1. 确定所需图标
2. 测量图标尺寸
3. 创建对应大小的元素
4. 设置雪碧图为背景
5. 调整背景位置显示目标图标
<div class="box"></div> <style> .box { width: 60px; height: 60px; background-color: red; background-image: url(./亚马逊精灵图.png); background-position: -270px -670px; } </style>五、线性渐变(linear-gradient)
.box1 { width: 200px; height: 200px; background-color: #000; margin: 50px auto; border: 1px solid black; background-image: repeating-linear-gradient(red 0%, yellow 70%); }
线性渐变参数说明：
参数1：方向(to left/right/top/bottom 或 角度deg/turn)
参数2+：颜色值及过渡位置(百分比)
示例：
linear-gradient(to right, red 10%, green 50%, blue 75%)
重复渐变：
repeating-linear-gradient(yellow 0px, red 50px) */
六、径向渐变(radial-gradient)
.box1 { width: 200px; height: 200px; background-image: repeating-radial-gradient(red 0%, yellow 50%); }径向渐变参数说明：
参数1：渐变形状与大小(circle/ellipse 或 尺寸+位置)
参数2+：颜色渐变
示例：
radial-gradient(100px 100px at 100px 0px, red, yellow) */
