background 背景类八大属性

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，此时背景图以提供的宽度作为参照来进行等比缩放