CSS3背景

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;