CSS(层叠样式表)之背景（background）

background-imgage背景图片

background-imgage:  url(地址)

background-repeat背景平铺效果

background-repeat:  repeat-x  |  repeat-y  |  repeat  |  no-repeat

background-position背景位置

background-position：百分数  |  由浮点数字和单位标识符组成的长度值

1、background-position：top  |  center  |  bottom  |  left  |  right

不写background-position则默认为left top；写一个值，另一个值默认为center；

2、background-position：20px 50px;

使用精确值定位，上面表示x轴20，y轴50px；负值表示x或y轴的反方向；

第一个值一定是x轴，第二个是y轴；

3、background-position：20px center;

使用混搭。第一个值仍然是x轴，第二个值是y轴。

background-attachment背景附着

background-attachment：scroll  |  fixed

scroll：背景图像时随内容滚动

fixed：背景图像固定

background背景简写

background：背景颜色  背景图片地址 背景平铺 背景滚动 背景位置

背景透明

background：rgba(0,0,0,0.6);

最后一个参数alpha透明度 取值范围0~1之间；

注意：背景半透明时指盒子背景半透明，盒子里面的内容不受影响。同样，可以给文字和边框透明，都是rgba的格式来写。

背景缩放（CSS3）

background-size: 100px; /*可以更改两个值，但是尽量修改一个*/

background-size: 50%; /*百分比*/

background-size：cover;  /*会自动调整缩放比例，保证图片始终填充满背景区域，如果溢出部分则会被隐藏*/

background-size：contain;  /*会自动缩放比例，保证图片始终完整显示在背景区域*/

多背景图片

background： 背景图片地址 背景平铺  背景位置 ，

 背景图片地址 背景平铺  背景位置 ，...，

背景颜色   背景图片地址 背景平铺 背景位置；

以逗号分隔可以设置多背景，可用于自适应布局。

多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上，为了避免背景色将图像盖住，背景色通常定义在最后一组上。