css中background相关属性

简单记录一下background相关属性

• background-origin 和 background-clip
  都有3个属性值：border-box|padding-box|content-box
  background-origin 定义背景从什么地方开始，如属性值为border-box，那么背景就从border开始，border中就开始有背景了；默认值为padding-box
  ackground-clip 定义背景从什么地方被剪裁，如属性值为content-box，那么content以外的（border和padding）中有背景的话，就会被剪裁掉。默然值为border-box，也就是不剪裁（border以外不会有背景了）
• background-size
  • auto： 默认值，保持图片的元素大小
  • cover： 背景图片占满容器（背景图片可能显示不全，宽和高至少一个显示完全）
  • contain： 背景图片完全显示（容器中可能有空白）
  • 百分数 ：容器的大小*百分数，就得背景图的宽高
  • 长度（像素px等）：背景图宽高
    长度或百分数，只设定一个值的话，表示背景图的宽。此时，背景图的高，为按照比例缩放后的高度。
• background-attachment
  • scroll：背景图相对于元素本身固定，不会随元素的滚动而滚动（但是页面滚动，整个元素都会动，该元素的背景图也会动）
  • local：背景图会随着元素的滚动而滚动（页面滚动，当然元素和背景图都会一起滚动啊）
  • fixed：背景图相对于视口固定，页面滚动，即使该元素动了，背景图也不会动（背景图和该元素的相对位置会改变）。
• background-position
  定义背景图的位置
  • top、center、bottom、left、right等关键字：很方便地将背景图放到容器内合适的位置
  • 长度：背景图的偏移大小（从background-origin开始偏移）
  • 百分数：也是背景图的偏移大小，参考的是容器中没有被背景填充的部分的宽或高（（容器高-背景图高）* 百分数）