CSS中background的具体属性说明

🎨 1）background-color 背景颜色

• 作用：设置元素的背景颜色。
• 示例：

background-color: #f5f5f5;  /* 浅灰色 */

---

🖼️ 2）background-image 背景图片

• 作用：设置背景图片或渐变色。

• 常见值：

  • url()：图片路径
  • linear-gradient()：线性渐变
  • radial-gradient()：径向渐变
  • conic-gradient()：圆锥渐变
• 示例：

background-image: url('img.png');  /* 背景图片 */
background-image: linear-gradient(to right, red, yellow);  /* 线性渐变 */

---

🎯 3）background-position 背景位置

• 作用：控制背景图片的位置。

• 常见值：

  • 关键字：left top（左上角）、center center（居中）
  • 百分比：50% 50%（水平垂直居中）
  • 像素：10px 20px（横向10px，纵向20px）
• 示例：

background-position: center center;  /* 背景居中 */

---

📏 4）background-size 背景尺寸

• 作用：控制背景图片的尺寸。

• 常见值：

  • auto：原图大小
  • cover：等比例缩放填满容器，可能会裁切
  • contain：等比例缩放，保证图片完整
  • 指定：100px 50px、100% 100%
• 示例：

background-size: cover;  /* 填满容器 */

---

🔁 5）background-repeat 背景是否平铺

• 作用：决定背景图是否重复。

• 常见值：

  • repeat：水平+垂直平铺
  • no-repeat：不平铺
  • repeat-x：水平方向平铺
  • repeat-y：垂直方向平铺
• 示例：

background-repeat: no-repeat;  /* 不重复 */

---

📌 6）background-attachment 背景滚动行为

• 作用：背景是否随页面滚动。

• 常见值：

  • scroll：背景随页面滚动（默认）
  • fixed：背景固定，不随页面滚动
  • local：背景随元素内容滚动
• 示例：

background-attachment: fixed;  /* 背景固定 */

---

🗂️ 7）background-origin 背景绘制起始区域

• 作用：决定背景图从哪个区域开始绘制。

• 常见值：

  • padding-box：从 padding 区域开始（默认）
  • border-box：从边框开始
  • content-box：从内容区域开始
• 示例：

background-origin: border-box;  /* 从边框开始 */

---

✂️ 8）background-clip 背景裁剪范围

• 作用：控制背景被裁剪到的区域。

• 常见值：

  • border-box：包含边框
  • padding-box：只到 padding 区
  • content-box：仅内容区
• 示例：

background-clip: content-box;  /* 裁剪到内容区 */

---

✅ 组合常用示例

background: #fff url('bg.jpg') center/cover no-repeat fixed padding-box content-box;

含义：

• 背景颜色白色
• 背景图片 bg.jpg
• 图片居中
• 背景图尺寸自适应填满
• 不平铺
• 背景固定
• 从 padding 区开始绘制
• 背景绘制裁剪到 content 区域