CSS3背景

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;

背景可以利用透明图片+背景色组合的方式来实现，性能更好且更换更灵活

![图2.png](http://upload-images.jianshu.io/upload_images/2110223-a501be62fff67551.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

线性渐变

可向下/向上/向左/向右/对角方向渐变，渐变可以有多个颜色，写法如下：

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