目录
[background-size:参数1 参数2 ；](#background-size:参数1 参数2 ；)
[2: repeating-linear-gradient()](#2: repeating-linear-gradient())
在之前的学习中我们已经知道如何设置背景颜色即------background-color：；
现在我们有这样的需求：将一张图片设置为盒子的背景。
background-image
此时分两种情况：1、背景图片比盒子大
2、背景图片比盒子小
情况1、如果图片大于盒子，默认显示图片的左上角
background-image: url(./img/大图2.webp);
情况2、如果图片小于盒子，默认横向纵向铺满图片
background-image: url(./img/小图.webp);
可以看到图片默认被填充满整个页面，大概填充了四五个这样
现在我就想要这个盒子里只显示这一张图
background-repeat
可选值：
repeat 默认值，重复
no-repeat 不重复
repeat-x x轴上重复
repeat-y y轴上重复
设置background-repeat: no-repeat;
现在我想要调整图片在盒子里面的位置
background-position：参数1参数2；
参数1:水平方向的偏移：长度单位，left，center，right，
参数2:垂直方向的偏移：长度单位，top，center，bottom
单位：长度单位，
注意：如果参数2不写，默认是center
设置：background-position：right；
现在我又想调整背景图片的大小
background-size:参数1 参数2 ；
参数1:宽度
参数2:高度
只设置宽高中的一个，另外一个，会自适应缩放
特殊值：
cover 铺满整个盒子，图片不一定完整显示
contain 完整显示图片，盒子不一定会铺满
设置：background-size: cover;
这是将小图放大了，如果是大图会怎么样？
设置：background-size: cover;
还记得上面说过，图片比盒子大，则默认显示图片的左上角
现在，不知道大家是否发现，我们给盒子设置的边框为double，背景色默认是充满整个盒子的包括内容区，内边距和边框。
现在有需求1、改变背景色的延伸范围
background-clip
可选值
border-box 默认值，背景色充满整个盒子，包括内容区，内边距，边框
padding-box 背景色填充内容区，内边距
content-box 背景色填充内容区
设置：background-clip: content-box;
此时还有一个属性，可以设置我们之前background-position偏移原点
background-origin
可选值：
border-box 从边框开始偏移
padding-box 默认值 从内边距开始偏移
content-box 从内容区开始偏移
设置background-clip: content-box;再设置background-position：0px 0px；
分页点
到这，我们延伸出一个想法：在设置轮播图时，我们想给分页点设置样式，在不点击时，是一个个圆，点击时变成外扩的圆角矩形。
css
ul>li {
width: 20px;
height: 20px;
background-color: red;
float: left;
margin: 0 10px;
border-radius: 50%;
}
ul>li:hover {
background-color: #fff;
background-clip: padding-box;
border-radius: 20px;
width: 40px;
}
可以实现效果，点击时变成圆角矩形，但是再点击时也会造成抖动，将别的元素挤走
所以可以设置内边距，再使用background-clip：content-box 让背景只填充在内容区，点击后再设置 background-clip：padding-box，由于盒子大小没有改变，所以不会发生抖动。
css
ul>li {
width: 20px;
height: 20px;
background-color: red;
float: left;
padding: 0 15px;
background-clip: content-box;
border-radius: 50%;
}
ul>li:hover {
background-color: #fff;
background-clip: padding-box;
border-radius: 20px;
}
background
通过该属性可以同时设置所有背景相关的样式
没有顺序的要求，谁在前谁在后都行
也没有数量的要求，不写的样式就使用默认值
注意：background-size要写在background-position后面
语法：位置/大小
css
background: #f60 url(./img/小图.webp) no-repeat padding-box border-box 100px 100px /200px 200px;雪碧图
提高网站性能的一种方式
一、图片整合技术（CSS-Sprite） 雪碧图/精灵图
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 减小了图片的总大小，提高请求的速度
二、雪碧图使用步骤
1:先确定要使用的图标
2:测量图标的大小
3:根据测量结果创建一个元素
4:将雪碧图设置为元素的背景
5：设置一个偏移量以显示正确的图片
雪碧图实例如下：
图标字体
图标字体相较于雪碧图用处更广，更方便灵活
可以去阿里巴巴矢量图标库下载到项目中使用
https://www.iconfont.cn/?spm=a313x.notifications.i3.2.444c3a81mcrSdT
线性渐变
渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果
渐变是图片，通过 background-image设置
可选值
1：linear-gradient(方位,颜色1,颜色2)
线性渐变，颜色沿着一条直线发生变化
参数1:表示方位，（可选值，不写默认是to bottom）
(1)to left，to right, to bottom, to top
(2)xxxdeg 表示角度，度数，会更灵活,0-360deg
(3)turn 表示圈 .5turn=180deg 1turn=360deg
参数2:颜色1
参数3:颜色2
注意：
可以写多个颜色，默认情况下，颜色是均分占比的
也可以手动的指定渐变的分布情况
background-image:linear-gradient(red 50px,yellow) ;
百分比表示指定颜色的标准中心线位置，百分比之间是过渡色,那么 0% 表示起点，100% 表示终点
例如：
background-image: linear-gradient(to right,red 10%,green 50%,blue 75%);;
表示含义：
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
50% 表示 green 的颜色中心线在线性渐变方向的 50% 的位置。
75% 表示 blue 的颜色中心线在线性渐变方向的 75% 的位置。
10% 到 50% 是 red-green 的过渡色，50%-75% 是 green-blue 的过渡色。
css
background-image:linear-gradient(0.5turn,black 50%,#fff 50%) ;
2: repeating-linear-gradient()
可以平铺的线性渐变
background-image: repeating-linear-gradient(yellow 0px, red 50px);
参数跟linear-gradient是一样的
css
background-image: repeating-linear-gradient(red 0%,yellow 70%);
放射渐变
1:radial-gradient()
经向渐变（放射性的效果）
默认情况下，圆心是根据元素的形状来计算的
正方形 圆形
长方形 椭圆型
参数1:圆心的形状
（1）circle圆形，ellipse椭圆，
（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
参数2:颜色1
参数3:颜色2
css
background-image: radial-gradient( red 0%,yellow 50%);
css
background-image: repeating-radial-gradient(red 0%, yellow 50%);