一、background-size 背景尺寸
background-size:x y //具体数值宽高大小
background-size:100% 100% //具体百分比大小，不溢出可能会变形
background-size:cover 比例放大 //如果图片比例方大到一些内容盒子放不下，会溢出然后看不见
background-size:contain 包含（图片不溢出）//意思就是图片不会变形，如：图片没有盒子大小可能会留出空白
二、多背景 ： 意思就是下面的属性可以用逗号，隔开加多个背景
1、background:url() 0 0,url() 0 100%; //值说明，第一个是地址 第二个是，是否平铺，第三、四个是图片位置，0 0 代表左上角 右下角代表 100% 100%
如：
background:url("images/1.jpg") no-repeat 0 0,url("images/2.jpg") no-repeat 100% 0,url("images/3.jpg") no-repeat 0 100%,url("images/4.jpg") no-repeat 100% 100%,}三、background-origin： 背景区域定位，（其实是设置哪里是边框）
1、padding-box 从padding区域开始显示背景。
如图：把边框设置透明会发现边框内把溢出的片段实现了平铺，而padding内的内容是完整的图片
2、 content-box： 从content内容区域开始显示背景。
如图：content 外的片段进行了平铺
3、 border-box 从border区域开始显示背景。
如图：
四、background-clip： 背景绘制区域（设定背景范围）
1、border-box 默认值，从border区域向外裁剪背景，边框里面是背景（包含边框）。
如图：
2、 padding-box 从padding区域向外裁剪背景，padding里面是背景（包含padding）。
如图:
3、content-box 从content区域向外裁剪背景，内容里面是背景(包含内容)。
如图：
4、text 背景填充文本，就是使文本成为背景
作用:
div{width:300px;height:300px;border:20px solid rgba(0,0,0,.8);
background:red url("images/1.jpg");
background-size:100% 100%;
}
.div1{-webkit-background-clip:text; //文本填充背景
color:rgba(0,0,0,0); // 黑色透明
font:50px/300px "微软雅黑";text-align:center;font-weight:800;
}
<div class="div1">
学习
</div>
5、no-clip 从border区域向外裁剪背景。
四、颜色渐变
线性渐变：linear-gradient(起点/角度，颜色 位置，…,) 用角度设置方向的时候，是值为left 开始逆时针旋转，如30deg 则从值为left的界面旋转30度
起点：left/top/right/bottom/left top… 默认top
角度：逆时针方向 0-360度
颜色 位置：red 50%, blue 100%(一开始红色然后到50%开始渐变，到100%为蓝色)
如：
div{
width:300px;height:300px;background-image:-webkit-linear-gradient(left top,red,blue); //这个属性默认的方向是 left 这里设置了红蓝如图
}
<body><!--身体-->
<div ></div>如图：
又如：如图，0%开始红色 渐变到50%为蓝色，蓝色渐变到100%为黄色
div{
width:300px;height:300px;
background-image:-webkit-linear-gradient(0deg,red 0%,blue 50%,yellow 100%);/*逆时针旋转*/
}
2、repeating-linear-gradient 线性渐变重复平铺 ，重复平铺
div{
width:300px;height:20px;
border:1px solid rgba(255,0,0,1);
background-image:-webkit-repeating-linear-gradient(30deg,#cc00ff 0,#663333 10px,#993300 10px,#6600cc 20px);
// 这里到20px结束，然后因为是repeating-linear-gradient 重复平铺，会重新实现一样的颜色渐变
border-radius:20px;transition:1s linear;
}如图：
IE低版本渐变(滤镜)：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000’,GradientType=‘1’);
五、径向渐变
radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)
起点：left/top/right/bottom或具体值/百分比
形状：ellipse(椭圆)、circle(正圆)
大小：具体数值或百分比，也可以是关键字（closest-side(最近端), closest-corner(最近角), farthest-side(最远端), farthest-corner(最远 角), contain(包含) ,cover(覆盖)）;
注:firefox目前只支持关键字
div{
width:300px;height:300px;
border:1px solid rgba(255,0,0,1);
background-image:-webkit-radial-gradient(rgba(0,0,0,1),rgba(0,255,0,1)); //颜色从黑色向绿径向渐变
}如图：
又如：
div{
width:300px;height:300px;
border:1px solid rgba(255,0,0,1);
background-image:-webkit-radial-gradient(200px 100px,100px 50px ,rgba(0,0,0,1),rgba(0,255,0,1));
//位置 横半径 竖半径 颜色
}
