CSS背景

CSS背景

通过设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

（一）背景颜色

语法：

background-color: 颜色值;

默认元素为transparent(透明)

（二）背景图片

background-image属性描述元素的背景图片，常用于一些小logo或者超大背景图片

语法：

background-image: none/unl(地址);

参考值	作用
none	无背景
url	使用绝对地址或相对地址背景图像

（三）背景平铺

默认情况下是平铺，

语法：

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

注意：

在使用过程中，平铺背景会压住背景颜色

（四）背景图片位置

使用background-postition可以修改图片在背景中的位置吧

语法：

background-position: x y;

参数使用时可以使用：方位名词或精确单位

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

1.方位名词做参数

a.两个方位名词没有前后之分

b.只显示单个名词时，默认居中

2精确单位做参数

a.注意前后顺序

b.注意第一个一定是x坐标，第二个可以默认水平居中

3.二者可以混用但是要注意x, y 顺序

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

background-attachment属性设置背景图像是否跟随滚动

语法：

background-attachment: sroll | fixed;

属性	作用
sroll	背景图片是随着对象内容滚动
fixed	固定

（六）背景复合写法

简约的写法：

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

（七）背景颜色的半透明

CSS3提供背景色

语法：

background: rgba(o,o,o,o.3);

1.分别对应：rgb+alpha（0-1.0）透明度

2.可以省略0

3.半透明指盒子背景，并非内容

4.放心使用，不需要考虑兼容

属性	作用	值
background-color	颜色	可以使用十六进制/RGB/默认颜色
background-image	背景图片	url（绝对/相对地址图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	顺序为x y，可以使用方向名词或精确单位
back ground-attachment	背景附着	scroll（滑动默认）/fixed（固定）
背景简写	书写简单	背景颜色 地址 平铺 滚动 位置
透明度	背景颜色半透明	rgba(0,0,0,.3)范围在（0-1.0）