background样式

1.background-size

（1）能够指定数值，图片可能会失真

background-size：100px 100px ;  

（2）能够指定百分比

background-size：100% 100% ;  

（3）指定contain,包含 ，等比例缩放，图片是完整的，可能会留白

background-size：contain ;  

（4）指定cover,覆盖，等比例缩放，可能图片不完整

background-size：cover ;  

2.background-position

background-position:center center;

3.background-clip 背景裁切，能够设置背景的显示范围

（1）background-clip:border-box;(默认值) 显示范围：border+padding+content

（2）background-clip:padding-box;显示范围：padding+content

（3）background-clip:content-box;显示范围：content

4.background-origin 背景显示的原点

（1）background-originp:border-box;

（2）background-origin:padding-box;(默认值) 

（3）background-origin:content-box;

5.background-image，背景图片

（1）background-image:url('./image/图片.png')

（2）background-image:linear-gradient(方向，颜色 范围，颜色 范围……)  

方向：to right , to left,to top,to bottom,角度deg

范围：支持数值和百分比 ,

background-image:linear-gradient(to right，red 30%,yellow 50%,blue 70%)  

（3）background-image:radial-gradient(半径 at 圆心位置，颜色 范围，颜色 范围……)  

圆的大小，半径，

圆心的位置，right left top botton center,

background-image:radial-gradient(100px at center center，red 30%,yellow 50%,blue 70%)  

6.background-color: #fff;

7.background-repeat   背景平铺

（1）background-repeat :repeat -x;

（2）background-repeat :repeat -y;

（3）background-repeat :no-repeat ;