CSS背景（background）

一、背景颜色（color）

语法：background-color：颜色值；  默认的值是   transparent   透明的

二、背景图片（image）

1、语法：background-image：none |  url（url）

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

 

 

 

 

background-image：url（images/demo.png）；

2、小技巧：提倡背景图片后面的地址，url不要加引号。

三、背景平铺（repeat）

1、语法：background-repeat：repeat | no-repeat | repeat-x | repeat-y

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

 

 

 

 

 

 

四、背景位置（position）重点

1、语法：

background-position：length || length

background-position：position || position

参数	值
length	百分数|由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

 

 

 

 

2、注意：

①必须先指定background-image属性；

②position后面是x坐标和y坐标，可以使用方位名词或者精确单位；

③如果只指定了一个方位名词，另一个值默认居中，为50%；

④如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中。

⑤如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left，top和top，left 效果一致；

⑥如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标。

3、实际工作中用的最多的是背景图片居中对齐。

五、背景附着

1、语义：背景附着就是解释背景是滚动还是固定的。

2、语法：background-attachment：scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

 

 

 

 

六、背景简写

1、background：属性的值的书写顺序官方并没有强制标准的，为了可读性，建议大家写：

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

2、语法：background：transparent url（image.jpg） repeat-y scroll center top；

 七、背景透明（CSS3）

1、语法：background：rgba（0,0,0,0.3）;

2、最后一个参数是alpha透明度，取值范围1~1之间。

3、我们习惯把0.3的0省略掉，这样写 background:raba(0,0,0,.3);

4、注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

5、因为是CSS3，所以低于ie9的版本是不支持的。