背景

• 指定元素背景色：background-color。
• 指定透明度：opacity，取值范围 0.0 ~ 1.0，值越低越透明。
• 背景图像：background-image，默认情况下图像会重复填充整个元素，取值通过 url("demo.png") 的形式。
• 背景重复：默认情况下，图像会在水平和垂直方向上都重复，通过 background-repeat 设置重复的方向。
  • 水平重复：repeat-x。
  • 垂直重复：repeat-y。
  • 不重复：no-repeat。
• 背景图像位置：background-position，两个值，第一个是水平位置，第二个是垂直位置。
  • center top left right bottom.
  • x% y%.
  • xpos ypos.
• 相对定位 background-origin：
  • padding-box：相对与内边距框来定位。
  • border-box：相对于边框盒来定位。
  • content-box：相对于内容框来定位。
• 裁剪 background-clip：
  • border-box：背景被裁剪到边框盒。
  • padding-box：背景被裁剪到内边距框。
  • content-box：背景被裁剪到内容框。
• 背景图像的尺寸：background-size: length|percentage|cover|contain。
  • length：设置背景图像高度和宽度，第一个值为宽度，第二个值为高度。
  • percentage：以父元素的百分比设置背景图像的宽度和高度，第一个值为宽度，第二个值为高度。
  • cover：把背景图片扩展至足够大。
  • contain：把图像扩展至最大尺寸。
• 背景附着：通过 background-attachment 属性指定背景图像是滚动的还是固定的。
  • 固定：设为 fixed。
  • 滚动：设为 scroll。
• 简写背景属性：使用 background 属性，将属性值按空格分隔，顺序为：color-image-repeat-attachment-position。