一、课程概述
1、学习课程名称：前端工程师2022版
2、章节名称：CSS3背景与渐变设置第一章至第三章（1-1 课程简介-慕课网体系课 (imooc.com)）
3、讲师名称：一阶段老师
4、课程概述：
（1）背景基础知识：包括1）背景颜色基础知识 2）背景图片基础知识
（2）背景图片的高级属性：包括1）背景图片的重复模式 2）背景尺寸 3）背景裁切 4）背景固定 5）背景图片位置 6）背景图片综合属性
（3）渐变背景：包括1）线性渐变 2）径向渐变
二、内容分享
1、背景基础知识
（1）backgroud-color属性设置背景颜色，可用十六进制、rgb()、rgba()表示法表示，注意padding区域是有背景颜色的；
（2）background-image属性设置背景图片，图片路径要写到url()圆括号中，如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发
（3）background-repeat属性设置背景图片的重复模式，可以利用该属性进行图片重复拼接
1）repeat：x，y均平铺；
2）repeat-x：x平铺
3）repeat-y：y平铺
4）no-repeat：不平铺
（4）background-size属性设置背景图片的尺寸，兼容到ie9
1）background-size:100px 200px;
宽度 高度
2）值也可以用百分数来设置，表示盒子宽、高的百分之多少
3）需要等比例设置的值，写auto
4）值contain和cover的区别：contain（容纳到盒子里，我要让客户看到完整的图片 ）、cover（撑满盒子，只要顾客看不到留白就可以）
（5）background-clip属性设置元素的背景裁切到哪个盒子，兼容到ie9
1）border-box：背景延伸至边框（默认值）
2）padding-box：背景延伸至内边（padding）,不会绘制到边框处（仅在dotted、dashed边框可察觉）
3）content-box：背景裁剪至内容区
（6）background-origin:content-box;背景起源，可以让图片完整地显示在图中
（7）background-attachment属性设置背景固定，决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
1）fixed：自己滚动条不动，外部滚动条不动
2）local：自己滚动条动，外部滚动条动
3）scroll：自己滚动条不动，外部滚动条动默认值（）
（8）background-position属性设置背景图片出现在盒子的什么位置
1）background-position:100px 200px;
2）可以用top、bottom、center、left、right描述图片出现的位置，如
正中心：background-position: center center;
右上角：background-position: right top;
3）如果background-position中如果仅规定了一个关键词，那么第二个值将是"center"。例如background-position: right相当于background-position: right center；，意思是水平方向靠右显示，垂直方向居中。
（9）background综合属性可将一些常用的背景相关的小属性合写到一条background属性中，注意一个盒子既有背景图片又有背景颜色：这个图片的背景可能是透明的，可以透过图片看到颜色
background:white url(images/archer.png) no-repeat center center;
背景颜色 背景图片 背景重复 背景位置
2、CSS精灵
（1）概念：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫CSS精灵技术（CSS雪碧图），可以减少HTTP请求数，加快网页显示速度，但也不方便测量，后期改动麻烦
（2）精灵图坐标正负问题：应以想要的图片出发，看自己要到达左上角这个方位需要移动多少，如向上移动和向左移动的坐标都是负的，需要设置background-position的坐标值为负的，才能实现效果
（3）可借助控制台设置精灵图的坐标值
1）先设置初始位置background-position：0px 0px;（大概预估也可）
2）调整竖直位置（第二个值）：选中竖直位置，按键盘方向键⬇，持续多按可以连续调整
3）调整水平位置（第一个值）：调整方法与竖直方向一致
4）最后看哪个坐标不合适再进行微调
3、渐变背景
（1）线性渐变：呈均匀线性的变化background-image:liner-gradient();
1）几种写法：
①background-image:liner-gradient( to right, blue, red);
渐变方向 开始颜色 渐变颜色
②角度渐变是水平线和渐变线之间的角度，以圆心为起点进行发散，90度是水平方向从左到右的渐变，渐变效果可以是多个颜色，颜色后面的百分比可以控制颜色渐变的位置。
background-image:liner-gradient( 45deg, blue, red);
渐变度数 开始颜色 渐变颜色
③多个颜色值，中间用百分数定义出现的位置设置中间色
background-image:liner-gradient( to bottom, blue, yellow 20% red);
（2）径向渐变：background-image可以用radial-gradient()形式创建径向渐变背景
background-image:radial-gradient( 50% 50%, blue, red);
圆心坐标 圆心颜色 圆心渐变为的颜色
4、浏览器私有前缀
三、课程心得
background背景的标签和属性比较多，但是使用起来的效果都很棒，需要多加记忆和练习，千万不要搞混了。