background-size
- length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto（可以用来适配高分辨率的屏幕）
- percentage: 以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中
- contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位
- padding-box: 背景图像相对于内边距框来定位
- border-box: 背景图像相对于边框盒来定位
- content-box: 背景图像相对于内容框来定位
background-clip
background-clip 属性规定背景的绘制区域
- padding-box: 背景被裁剪到边框盒
- border-box: 背景被裁剪到内边距框
- content-box: 背景被裁剪到内容框
多背景
在之前的CSS中只能使用一张背景图片，CSS3可以使用多张背景图片
background:url("1.jpg") 0 0 no-repeat,
url("2.jpg") 200px 0 no-repeat,
url("3.jpg") 400px 201px no-repeat;
背景可以利用透明图片+背景色组合的方式来实现，性能更好且更换更灵活
线性渐变
可向下/向上/向左/向右/对角方向渐变，渐变可以有多个颜色，写法如下：
background: linear-gradient(to right bottom, red , blue,yellow);
// 默认情况可省略方向（从上到下渐变）
background: linear-gradient(red, blue);
应用
.cover{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: url(bg.jpg) center center no-repeat;
background-size: cover;
}
.cover:before{
content: '';
display: block;
width: 50%;
position: absolute;
top:0;
left:0;
bottom:0;
background: linear-gradient(to bottom right, rgba(255,0,0,0), rgb(200,0,0));
}
.cover:after{
content: '';
display: block;
width: 50%;
position: absolute;
top:0;
right:0;
bottom:0;
background: linear-gradient(to bottom left, rgba(255,0,0,0), rgb(187, 61, 187));
}
渐变应用.PNG
径向渐变
圆形或椭圆形渐变，用法如下：
background: radial-gradient(10px 20px at 20px 50px,pink,yellow,green);
径向渐变.png
