前端background笔记

一、background-color 背景颜色
1.指定其颜色 如：red，orange，green 等。

.a{
	background-color:red;
}

2.使用十六进制法 如：#fff、#000等。

.b{
	background-color:#fff;		
}

3.rgba（0,0,0,0.4）(红，绿色，蓝，透明度【0~1之间】)

.c{
	background-color:rgba(0,0,110,0.5);
}

二、background-image 背景图片
1.none 默认值。
2.url（插入图片）

.a{
	background-image:url(./image/img.png);
}

3.linear-gradient (线性渐变)
默认从上往下：to left|top|right|bottom 方向 ||to bottom right.
（1）background-image: linear-gradient(方向, 颜色, 颜色, …);

.a{
	background-image: linear-gradient(to left,#36964e,#963674);
}

（2）background-image: linear-gradient(角度deg, 颜色, 颜色, …);

.b{
	background-image: linear-gradient(90deg,#36964e,#000);
}

（3）repeating-linear-gradient 重复线性渐变

.c{
	background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

4.radial gradients径向渐变
由它们的中心定义：background-image: radial-gradient(形状 大小 at position, 颜色, …, 颜色);
形状：circle 圆形 ellipse 椭圆形
大小：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：径向渐变的半径长度为从圆心到离圆心最近的边。
closest-corner ： 径向渐变的半径长度为从圆心到离圆心最近的角。
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边。

三、 background-size 背景图片大小
（1）auto auto 默认值

.a{
	background-size:auto auto;
}

（2）直接设置大小 px em 等

.b{
	background-size:100px 200px;
}

（3）设置百分比%

.c{
	background-size:100% 100%;
}

四、background-position 背景图片定位
（1）关键字 left、top、center等等。

.a{
	background-position:left;
}

（2）设置长度大小

.b{
	background-position:100px;
}

（3）设置百分比

.b{
	background-position:30%;
}

五、background-repeat 背景图像重复
（1）repeat 默认
（2）repeat-X ,repeat-Y 根据X和Y轴重复

.a{
	background-repeat:repeat-X;
}

（3）no-repeat 不重复

.b{
	background-repeat:no-repeat;
}

六、background-clip 背景剪裁属性从指定位置开始绘制
（1）border-box 默认值，覆盖到边框
padding-box 覆盖到内边距，不包括边框
content-box 只覆盖到内容，不包括边框和内边距

.box{
	.bg1{
		background-clip:border-box;
	}
	.bg2{
		background-clip:padding-box;
	}
	.bg3{
		background-clip:content-box;
	}
}

七、 background-origin 背景图片位置区域
border-box 默认值，覆盖到边框
padding-box 覆盖到内边距，不包括边框
content-box 只覆盖到内容，不包括边框和内边距

八、background-attachment 视口是否固定或滚动
（1）scroll 默认值，背景相对元素固定
（2）fixed 相对视口固定
（3）local 相对元素内容固定