backgorund

1.background-color

• 功能
  设置背景颜色
• 属性值
  符合CSS中颜色规范的值。默认背景颜色是 transparent。

2.background-image

• 功能
  设置背景图片
• 属性值
  url(图片的地址)

3.background-repeat

• 功能
  设置背景重复方式
• 属性值
  repeat：重复，铺满整个元素，默认值。
  repeat-x：只在水平方向重复。
  repeat-y：只在垂直方向重复。
  no-repeat：不重复。

4.background-position

• 功能
  设置背景图位置
• 设置方式
  1. 通过关键字设置位置：
     写两个值，用空格隔开
     水平：left、center、right
     垂直: top、center、bottom
     如果只写一个值，另一个方向的值取 center
  2. 通过长度（px）指定坐标位置：
     以元素左上角，为坐标原点，设置图片左上角的位置。
     两个值，分别是x 坐标和y 坐标。
     只写一个值，会被当做 x 坐标，y坐标取center。
  3. 第一个值是水平位置，第二个值是垂直位置。
     左上角是 0% 0%。右下角是 100% 100%。
     如果您仅规定了一个值，另一个值将是 50%（center）。

5.background-size

• 功能
  设置背景图的尺寸。
• 设置方式
  1. auto —— 背景图片的真实大小。(默认值)
  2. 用长度(px)值指定背景图片大小，不允许负值。
  3. 用百分比指定背景图片大小，不允许负值。
  4. contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整
     背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
  5. cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要
     注意：背景图片有可能显示不完整。—— 相对比较好的选择

6.background-origin

• 功能
  设置背景图的原点。
• 设置方式
  1. padding-box —— 从padding 区域开始显示背景图像。(默认值)
  2. border-box —— 从border 区域开始显示背景图像。
  3. content-box —— 从content 区域开始显示背景图像。

7. background-clip

• 功能
  设置背景图的向外裁剪的区域。
• 设置方式
  1. border-box —— 从border 区域开始向外裁剪背景。 (默认值)
  2. padding-box —— 从padding 区域开始向外裁剪背景。
  3. content-box —— 从content 区域开始向外裁剪背景。
  4. text —— 背景图只呈现在文字上。（ 文字颜色需透明，color:transparent ;）

8. background-attachment

• 功能
  属性设置背景图像是否固定或者随着页面的其余部分滚动。
• 设置方式
  1. scroll —— 背景图像会随着页面其余部分的滚动而移动。 (默认值)
  2. fixed —— 当页面的其余部分滚动时，背景图像不会移动。
  3. inherit —— 规定应该从父元素继承 background-attachment 属性的设置。

9. background-blend-mode

• 功能
  属性定义每个背景层（颜色和/或图像）的混合模式。
• 设置方式
  

混合属性

• background: bg-color bg-image bg-repeat position/bg-size bg-origin
  bg-clip bg-attachment ;
• ！！！注意：使用混合属性同时设置图片的位置和大小时要写在一起并用 / 分隔开。