通过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: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;