公输的前端学习记录day10

三：CSS的背景

 1，背景颜色

background-color：颜色值；

一般情况下默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

 2，背景图片

background-image ：none丨url（url）

常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是便于控制。（精灵图也是一种运用场景）

不能落下url，括号里写图片的路径（绝对或相对路径）。

3，背景平铺

 background-repeat：repeat（平铺）丨no-repeat（不平铺）丨repeat-x（沿x轴平铺）丨repeat-y

（默认平铺）

背景颜色和背景图片可以同时添加，但图片会压在背景颜色上。

 

4，背景图片的位置（重要）

background-position：x y；

x y坐标，可以使用方名词或精确单位

length 百分数（由浮点数字和单位标识符组成的长度值）

1。position top/center/bottom/left/right 方位名词。

（1）如果都是方位名词，则两个值前后顺序无关，如：left top和top left效果一致。

（2）如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐。

2。参数是精确值

 第一个一定是x坐标，第二个一定是坐标。

如果只指定一个数值分析，那该数值一定是x坐标，另一个默认垂直居中

3。参数是混合单位，则第一个x第二个y

5，背景图像固定（背景附着）

background-attachment：scroll（滚动）丨fixed（固定）

设置背景图片是否固定或者随页面其余部分滚动。（视差滚动）

6，背景复合写法

在使用简写属性时没有特定的书写顺序，一般习惯约定顺序：background：背景颜色 背景图片地址；背景平铺：背景图像滚动背景图片位置中间用空格隔开

7，背景色半透明

 background：rgba（0，0，0，0.3）

a是alpha透明度，取值在0~1之间。习惯性省掉0，只写.几。