【Vichy的学习日记 #6】CSS背景

一.背景颜色

background-color:颜色值;

默认值：transparent（透明）

二.背景图片

background-image:url(路径)

默认：none

三.背景平铺

background-repeat:属性;

repeat-x（向x轴平铺）
repeat-y（向y轴平铺）
no-repeat（不平铺）
repeat（默认）

四.背景图片名字

background-position:x y;

length：百分数/由浮点数字和单位标识符组成的长度值
position：top/center/bottom/left/center/right

可以使用方位名词或者精确单位

五.背景图片：精确设置

1.参数是方位名词

• 如果指定的两个位数都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
• 如果指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是精确单位

• 如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
• 如果只指定一个数值，那一定是x，另一个默认垂直居中

3.参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合，则第一值x坐标，第二个y坐标

六.背景图像固定

background-attachment:参数;

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

七.背景复合写法

background:颜色,地址,平铺,滚动,位置;

八.背景半透明

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

• 最后一个参数是alpha透明度，取值范围是0~1之间
• 背景半透明指盒子背景半透明，盒子里面的内容不受影响