通过CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1
2
3
4
5
6
background-color: 颜色值;    /*背景颜色*/
background-image: url();    /*背景图片*/
background-repeat: repeat |no-repeat |repeat-x |repeat-y ;    /*背景平铺*/
background-position: x y;    /*背景位置*/
background-attachment: fixed|scroll;    /*背景附着*/
background: rgba(0,0,0,0.3)    /*背景色半透明*/

背景图片位置

  1. 参数是方位名词
  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
  1. 参数是精确单位
  • 如果参数值是精确坐标，那么第一个肯定是x 坐标，第二个一定是y坐标
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
  1. 参数是混合单位
  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景复合写法

1
background: transparent url(image.jpg) repeat-y  fixed  top ;

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background 中。从而节约代码量.当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;