CSS中的背景属性（background）详解

描述
CSS的background属性用于设置元素的背景效果，包括背景颜色、背景图片、背景定位等。它实际上是一个复合属性，包含多个子属性，掌握这些子属性的细节能实现复杂的背景效果。

1. 背景属性的组成
background包含以下子属性：

• background-color：背景颜色
• background-image：背景图片
• background-repeat：背景重复方式
• background-position：背景位置
• background-size：背景尺寸
• background-attachment：背景固定方式
• background-origin：背景定位区域
• background-clip：背景绘制区域

2. 各子属性详解

2.1 background-color

• 设置纯色背景
• 值：颜色值（如#fff、rgb(0,0,0)）、transparent（透明）
• 默认覆盖整个元素（包括padding和border区域，具体受background-clip影响）

2.2 background-image

• 设置背景图片，可同时设置多个背景图（用逗号分隔）
• 值：url('图片路径')、渐变函数（如linear-gradient()）、none
• 示例：background-image: url('bg.jpg'), linear-gradient(red, blue);

2.3 background-repeat

• 控制背景图片的重复方式
• 值：
  • repeat：默认，水平和垂直都重复
  • repeat-x：仅水平重复
  • repeat-y：仅垂直重复
  • no-repeat：不重复
  • space：均匀排列（不裁剪）
  • round：自动缩放以适应容器

2.4 background-position

• 设置背景图片的起始位置
• 值：关键词（left/center/right top/center/bottom）、长度值、百分比
• 可指定两个值（水平 垂直），如：center top 或 50% 20px

2.5 background-size

• 设置背景图片尺寸
• 值：
  • auto：保持原尺寸
  • cover：覆盖整个容器（可能裁剪图片）
  • contain：完整显示图片（可能留白）
  • 具体尺寸：如100px 50px

2.6 background-attachment

• 控制背景图片是否随页面滚动
• 值：
  • scroll：默认，随元素内容滚动
  • fixed：相对于视口固定
  • local：随元素内容滚动

2.7 background-origin

• 设置背景定位的参考区域
• 值：
  • padding-box：相对于内边距框（默认）
  • border-box：相对于边框框
  • content-box：相对于内容框

2.8 background-clip

• 设置背景绘制的区域
• 值：
  • border-box：绘制到边框框（默认）
  • padding-box：绘制到内边距框
  • content-box：只绘制到内容框
  • text：将背景裁剪为文字前景色（需-webkit-前缀）

3. 复合写法

• 完整语法：background: [color] [image] [repeat] [attachment] [position] / [size] [origin] [clip];
• 注意：position和size之间要用/分隔
• 示例：background: #fff url('bg.jpg') no-repeat fixed center/cover content-box;

4. 实际应用技巧

4.1 多背景图

.element {
  background: 
    url('bg1.png') left top no-repeat,
    url('bg2.png') right bottom no-repeat,
    linear-gradient(blue, pink);
}

4.2 背景渐变纹理

.element {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('texture.jpg');
}

4.3 背景视差效果

.parallax {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

5. 注意事项

• 多个背景图时，先写的图片会显示在上层
• background-size必须在position后并用/分隔
• 部分属性（如background-clip: text）需要浏览器前缀
• 性能考虑：避免使用过大的背景图片