背景图
background-image:url();
控制背景图是否重复：background-repeat
- background-repeat:repeat; 默认情况 重复
- background-repeat:no-repeat; 不重复
- background-repeat:repeat-x; 只有水平方向重复
- background-repeat:repeat-y; 只有垂直方向重复
控制背景图的位置:background-position
- 使用方位值（内容里面直接写上下左右来控制）
- background-position:right bottom;
- 使用长度 控制它的主轴跟交叉轴位置，可以为负数，超出 padding 部分自动隐藏
- background-position: 20px 50px;
- background-position: -20px -50px;
控制背景图附着情况：background-attachment
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
- 默认情况 随着页面一起滚动
- background-attachment:scroll;
- 不随页面一起滚动
- background-attachment: fixed; (如果设置了背景图的方位值，则它会随着视口的位置变化)
控制背景图尺寸:background-size（CSS3新增可以通过长度、百分比和关键字（contain和cover）控制
长度：
background-size: 100px 100px;
百分比：
相对于盒子的尺寸
background-size: 80% 50%;
只设置一个值时，第二个值默认为自动（随第一个值等比列缩放）
background-size: 80%;
关键字
等比列缩放，尽可能缩放背景图，但不会超过盒子（某一个方向填满盒子为止）
background-size: contain;
等比例缩放，尽可能缩放背景图，直到盒子占满，背景图超出部分不可见（全部填满盒子为止）
background-size: cover;
属性简写：
background:url()
图片拼合技术——雪碧图 sprite
1、定视口
根据插入图片的大小来确定图片宽高
2、插图片
background-image:url(路径);
{如果该元素是行类元素必须修改为块级元素或者行类块: display:inline-block 不然不会显示}
3、调整位置
background-position:宽、高；只要是雪碧图那么position里都是负数，最多是0.不能是正数。
渐变
1、线性渐变 linear-gradient()
属性：background-image:linear-gradient()
① 定义颜色的渐变方向
1).通过方位值确定渐变方向
方位值：上右下左 to( top right bottom left )
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
例1：从左边渐变到右边（to right）,渐变的颜色变化，从黄色渐变为红色（yellow,red）。渐变颜色的区别最少应该有两个颜色。
.box1{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: linear-gradient(to right,yellow,red);
}
例2：从左下边渐变到右上边（to right top）,渐变的颜色变化，从黄色渐变为红色（yellow,red）。
.box2{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image:linear-gradient(to right top,yellow,red);
}
2).通过角度定义方向 单位：deg
角度取值：上方是0deg，右方是90deg，下方是180deg，左方是-90deg
如图：
<body>
<div class="box3"></div>
<div class="box4"></div>
</body>
例3：从左往右
.box3 {
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: linear-gradient(90deg, yellow, green);
}
例4：从上到下
.box4 {
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: linear-gradient(180deg, yellow, green);
}
② 定义颜色的位置
<body>
<div class="box5"></div>
<div class="box6"></div>
</body>
例5：（0-20px这个区域显示yellow,20-40px这个区域显示red,40-60px这个区域显示green）
.box5{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: linear-gradient(135deg,yellow 0px,yellow 20px,red 20px,red 40px,green 40px,green 60px);
}
③ 重复效果(repeating)
例6：
.box6{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: repeating-linear-gradient(135deg,yellow 0px,yellow 20px,red 20px,red 40px,green 40px,green 60px);
}
2、径向渐变 radial-gradient
属性：background-image: radial-gradient()
使用关键字定义渐变形状 circle 表示圆形 ellipse 表示椭圆（默认情况）
<body>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
</body>
默认从中心开始
例7：
.box7{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: radial-gradient(circle,red ,yellow);
}
椭圆形
例8：
.box8{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: radial-gradient(ellipse,red ,yellow);
}
<!-- 或 background-image: radial-gradient(red ,yellow);-->
定义渐变开始的位置(at)
例9：定义开始的位置在他的宽30%，高50%的地方
.box9{
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: radial-gradient(circle at 30% 50%,red ,yellow);
}
定义渐变的形状大小(在形状后空格跟上像素)
例10：渐变的形状大小为50px
.box10 {
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: radial-gradient(circle 50px at 30% 50%, red, yellow);
}
定义颜色的位置
例11：50px以内是红色，50px以外是黄色。
.box11 {
width: 200px;
height: 100px;
border: #000 1px solid;
background-image: radial-gradient(circle 50px at 30% 50%, red 50px, yellow 50px);
}
