CSS学习（5）——背景

目录

1.背景颜色

2.背景图片

3.背景图片位置

4.背景图像固定（背景附着）

5.背景复合写法

6.背景颜色半透明

---

1.背景颜色

定义元素的背景颜色。

语法：

background-color: 颜色值

默认为transparent（透明的）。

2.背景图片

用于常见logo或者一些装饰性的小图片或者是超大的背景图片。

语法：

baxkground-image: url(所在位置);

默认为平铺用background-repeat；

repeat为平铺；no-repeat不平铺；repeat-x按x轴平铺；repeat-y按y轴平铺；

3.背景图片位置

语法：

background-position: x y;

x,y可以使用方位名词或精确单位。

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

position：方位名词如top,center,bottom,left,right

注意：

1.若参数为方位名词

（1）如果指定的两个词都是方位名词，则两个值前后顺序无关，如left top与top left一致。

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

2.参数为精确单位

（1）第一个一定为x坐标，第二个一定为y坐标。

（2）若只指定一个参数，一定是x坐标，另一个默认垂直居中。

3.可以精确单位和方位名词混合使用。

4.背景图像固定（背景附着）

设置背景图像是否固定或者随页面其余部分滚动。

语法：

background-attachment: sroll  |  fixed

sroll：随页面滚动（默认值）。

fixed: 背景图片固定。

5.背景复合写法

语法：

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

顺序没有强制性要求。

6.背景颜色半透明

语法：

background:rgba(x,x,x,x);

a的取值为0~1之间。