background-size
background-size: 100%; /* 其实只是设置背景图的宽度等于盒子宽度的100% */
background-size: 100% 100%; /* 背景宽度 = 盒子宽度 背景高度 = 盒子高度 */
contain：包含
必须保证盒子可以完全包含整个背景图
或者说整个背景图一定要完全的显示出来
按较小的边进行缩放
注意：如果使用contain或者cover关键字，只有一个属性值。
cover：覆盖
保证背景图能够完全覆盖整个盒子
background-origin和background-clip（设置的是background-position的参考点）
background-origin：设置背景图从哪里开始绘制
border-box：设置背景图从边框开始绘制
padding-box：设置背景图从内边距开始绘制
content-box：设置背景图从内容区开始绘制
background-clip：指定对象的背景图向外裁剪的区域
border-box：从border区域（不含border）开始向外裁剪
padding-box：从padding区域开始向外裁剪
content-box：从内容区开始向外裁剪背景
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，需要与-webkit-text-fill-color: transparent;配合使用
渐变的分类
1、线性渐变
2、径向渐变
3、重复渐变
线性渐变
background-image: linear-gradient(to top right, yellow, yellowgreen); /* 颜色值从左下角往右上角排列 */
background-image: linear-gradient(0deg, yellow, yellowgreen); /* 0deg == to top 默认值：180deg == to bottom */
径向渐变
background-image: radial-gradient(circle, white, yellow, blue); /* shape：设置渐变形状 circle：圆 默认值 ellipse：椭圆 */
background-image: radial-gradient(100px 50px, white, yellow, blue); /* 设置圆的半径或者设置椭圆的横轴跟纵轴，也可以确定圆的形状 */
background-image: radial-gradient(circle at 180px 0, white, yellow, blue); /* 设置圆心的位置： at left top at 180px 0 */
background-image: radial-gradient(closest-corner at 40px 40px, white, yellow, blue); /* 使用关键字设置圆的半径 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边 farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角 */
重复渐变
重复线性渐变：repeating-linear-gradient
重复径向渐变：repeating-radial-gradient
background-image: repeating-linear-gradient(135deg, skyblue 5%, white 5%, white 10%, skyblue 15%);
background-image: repeating-radial-gradient(white 10%, blue 20%, yellow 30%);
多背景
background: url(bg.jpg) no-repeat left top,
url(bg.jpg) no-repeat right top,
url(bg.jpg) no-repeat left bottom,
url(bg.jpg) no-repeat right bottom;