1.背景图片：

background-image:url(图片地址；绝对路径或相对路径)

2.背景图片平铺：

不平铺：background-repeat:no-repeat;
横向平铺（水平位置）：background-repeat:repeat-x;
纵向平铺（垂直位置）background-repeat:repeat-y;
方法1：使用方位名词表示：
背景图片位置：用方位表示（上（top）下（bottom）左（left）右（right）居中（center）；每个方位用空格隔开；
图片在左下位置显示：background-position：left bottom；
图片在右下位置显示：background-position：right bottom；
图片在左上位置显示：background-position：left top；
图片在右上位置显示：background-position：right ：top；
图片在水平居中，垂直居中位置显示：background-position：center center；
注意：如果都是（指定）两个方位词，这两个值的前后顺序无关；如：background-position：bottom left；和background-position：left bottom；是一样的；

如果只填写了一个方位名字如下：
background-position：right；
另外一个默认居中对齐。为了更好理解尽量写全；
方法2：使用精确数值表示（就是确定了一个准确值）：
第一个x坐标，第二个y坐标（第一个数值（x）水平，第二个（y）垂直）；
如：background-position：10px 20px；
上面两个是精确坐标，第一个肯定是x，第二个肯定是y；

如果只指定了一个精确坐标，那另一个就是默认垂直居中的；
如：background-position:20px ;

方法3：使用混合单位（方位+数值）
精确坐标和方位名字可以混合使用，第一个是x坐标，第二个是y坐标；
如：background-position：50px top；

3.背景附着（背景图片固定还是可以滚动）：

比较简单只有两个值：
背景图片固定：background-attachment:fixed；
背景图片滚动：background-attachment：srcoll；

4.背景复合写法：
以上图片属性可以简写成（并不是官方要求，）：background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
background：pink url() no-repeat fixed center top;
各个属性之间用空格隔开；

5.背景色半透明（注意：盒子里面的内容不会跟随透明）：background：rgba(0,0,0,0.3);

rgb后面的a表示的是alpha透明度 取值范围0-1之间；
我们习惯把0.3写成.3前面的0省略掉：background：rgba(0,0,0,.3);
注意：背景透明是指盒子背景半透明，盒子里的内容不受影响；
因为是CSS3，所以低于IE9的版本是不支持的；

文章目录