CSS 背景（background）系列属性

CSS 背景与渐变样式指南

一、背景色与背景图基础

css 复制代码

.box1 {
  width: 300px;
  height: 300px;
  border: 10px double black;
  padding: 30px;
  margin: 0 auto;
}

1. 背景色设置

css 复制代码

background-color: #74985d;

2. 背景图片设置

css 复制代码

background-image: url(./img/小图.webp);
/* 图片尺寸说明：
   - 小于盒子时默认平铺
   - 大于盒子时显示左上角部分 */
background-image: url(./img/大图2.webp);

3. 图片重复方式控制

css 复制代码

background-repeat: no-repeat;
/* 可选值：
   - repeat（默认）
   - no-repeat
   - repeat-x
   - repeat-y */

4. 背景图位置调整

css 复制代码

background-position: 100px;
/* 参数格式：
   参数1：水平方向（px/left/center/right）
   参数2：垂直方向（px/top/center/bottom） */

5. 背景图尺寸调整

css 复制代码

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 复合属性简写

css 复制代码

.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)技术

雪碧图优势

整合多个小图标为单张图片，减少HTTP请求
提升页面加载性能
改善用户体验

使用步骤

确定所需图标
测量图标尺寸
创建对应大小的元素
设置雪碧图为背景
调整背景位置显示目标图标

html 复制代码

<div class="box"></div>

<style>
.box {
  width: 60px;
  height: 60px;
  background-color: red;
  background-image: url(./亚马逊精灵图.png);
  background-position: -270px -670px;
}
</style>

五、线性渐变(linear-gradient)

css 复制代码

.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)

css 复制代码

.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) */