学习前端CSS第八天

1.CSS的背景

（1）背景颜色

 /* background-color: transparent;   透明的 清澈的  */

 /* background-color: 颜色; */

（2）背景图片 

    background-image: url(images/logo.png);

（3）背景平铺

 /* 1.背景图片不平铺 */

 /* background-repeat: no-repeat; */

 /* 2.默认的情况下,背景图片是平铺的 */

 /* background-repeat: repeat; */

 /* 3. 沿着x轴平铺 */

 /* background-repeat: repeat-x; */

 /* 4. 沿着Y轴平铺 */

background-repeat: repeat-y;

 /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */

  （4）背景图片位置  

background-position: x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精准单位。

length  百分比 | 有浮点数和单位标识符组成的长度值

position top | center |bottom |left |center |right 方位名词

如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系

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

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

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

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

 background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

/* 把背景图片固定住 */

 background-attachment: fixed;

/* 背景图像是随着对象内容滚动 ，默认*/

 background-attachment: scroll;

（6）背景的复合写法

background属性

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

（7）背景色半透明

background:rgba(0,0,0,0.3)；

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

我们习惯性的把0省略掉，写成background:rgba(0,0,0,.3)；