background 背景类八大属性

背景颜色（当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上）
background-image：背景图像
background-repeat：背景图像如何铺排填充
- repeat-x：背景图像在横向上平铺
- repeat-y：背景图像在纵向上平铺
- repeat：背景图像在横向和纵向平铺
- no-repeat：背景图像不平铺
background-attachment :设置或检索背景图像是随对象内容滚动还是固定的
- fixed：背景图像相对于窗体固定。
  scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
background-position:设置或检索对象的背景图像位置
- <percentage>：用百分比指定背景图像填充的位置。可以为负值。
- <length>：用长度值指定背景图像填充的位置。可以为负值。
- center：背景图像横向和纵向居中。
- left：背景图像在横向上填充从左边开始。
- right：背景图像在横向上填充从右边开始。
- top：背景图像在纵向上填充从顶部开始。
- bottom：背景图像在纵向上填充从底部开始。
- 如果提供四个，每个或偏移前都必须跟着一个关键字（即left | center | right | top | bottom），偏移量相对关键字位置进行偏移。
  示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
  缩写方式： background:url(test1.jpg) no-repeat right 20px bottom 20px;
- 如果提供三个： 拆分方式： background:url(test1.jpg) no-repeat left bottom 10px;
  要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如：”10px bottom 20px” ，这样的参数设置是错误的，因为10px前面没有关键字。
- 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）
background-origin:设置或检索对象的背景图像计算 <’ background-position ‘> 时的参考原点(位置)
- padding-box：从padding区域（含padding）开始显示背景图像。
- border-box：从border区域（含border）开始显示背景图像。
- content-box：从content区域开始显示背景图像。
background-clip：指定对象的背景图像向外裁剪的区域
- padding-box：从padding区域（不含padding）开始向外裁剪背景。
- border-box：从border区域（不含border）开始向外裁剪背景。
- content-box：从content区域开始向外裁剪背景。
- text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果
background-size： 检索或设置对象的背景图像的尺寸大小
- <length>：用长度值指定背景图像大小。不允许负值。
- <percentage>：用百分比指定背景图像大小。不允许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
- 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
- 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放