【九月打卡】第12天 前端工程师2022版 背景与渐变第一讲

课程名称：前端工程师2022版

课程章节：背景与渐变

课程讲师： elex

课程内容：

background-repeat    
背景图片平铺方式    repeat 默认值，x y 均平铺    no-repeat 不平铺    repeat-x x 轴平铺    repeat-y y 轴平铺
background-size    
设置背景图片的尺寸    设置图片 宽 高，可以用 %，还可以用 auto      只有一个值为设置宽，高度相当于默认为 auto    contain    背景图片尺寸刚好容纳到盒子里    cover    背景图片尺寸撑满盒子 
 background-clip    
 设置元素背景裁切到哪个部分    border-box    背景裁切至边框内，默认值    padding-box    背景裁切至内填充    content-box    背景裁切至内容区 
background-origin    
背景图片开始平铺位置    border-box    背景从边框区域开始绘制    padding-box    背景从内填区域充开始绘制    content-box    背景从内容区域开始绘制 
background-attachment    
背景图像位置在是口内固定，或者随着包含他的区块滚动    scroll    自己滚动条不动，页面滚动条动，默认值；固定到盒子上    fixed    自己滚动条不动，页面滚动条不动；固定到页面上                平铺是从页面左侧与盒子顶部所在的页面位置处开始，backgr-origin 失效                相当于固定在开始位置为左上角，浏览器窗口展现的页面区域处    local    自己滚动条动，页面滚动条动；固定到盒子内容上 
background-position    
背景图片出现位置    x y 轴偏移，也可以用 top bottom center left right 描述位置    只写一个值，则另一个值默认 center 

CSS精灵：将多个小图标合并制作到一张图片上，使用 background-position 属性，单独显示其中一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图    
优点：可以减少HTTP请求次数，加快网页显示速度    
缺点：不方便测量、后期改动麻烦    注意：精灵图移动方向，background-position 值为负数 background: color image position/size repeat origin clip attachment, ...;    不分顺序，可以省略值    设置 size 必须有 position    origin 与 clip 属性值相同，只写一个默认为两个都是，写第二个值为 clip background-image 可以创建渐变背景 linear-gradient(方向，颜色1 位置1 位置2, 颜色2 位置, ...) 属性值，线性渐变    方向可以为 to top 或 to top left 的样式    方向也可以为 45deg 的样式，默认 0 为垂直向上，顺时针旋转    位置为颜色中心的位置 background-image: radial-gradient(shape size at position, start-color, ..., last-color);    shape    确定圆的类型        ellipse (默认)     指定椭圆形的径向渐变        circle    指定圆形的径向渐变    size    定义渐变的大小        farthest-corner    默认，指定径向渐变的半径长度为从圆心到离圆心最远的角        closest-side    指定径向渐变的半径长度为从圆心到离圆心最近的边        closest-corner    指定径向渐变的半径长度为从圆心到离圆心最近的角        farthest-side    指定径向渐变的半径长度为从圆心到离圆心最远的边        椭圆可以直接写 x y 半轴长，圆直接写 r 半径长    position    定义渐变的位置，注意要加 at        center    默认，设置中间为径向渐变圆心的纵坐标值        top    设置顶部为径向渐变圆心的纵坐标值        bottom    设置底部为径向渐变圆心的纵坐标值        可以 x y 轴值，一个值为 x 轴值，另一个默认为 center    start-color 部分与线性渐变相似 background-image: repeating-linear/radial-gradient()    重复渐变 

不同浏览器有不同私有前缀，用来对实验性质的 CSS 属性加以标识    Chrome    -webkit-    Firefox    -moz-    Ie Edge    -ms-    Opear    -o-

课程收获：

谢谢老师，讲的非常细致，很容易懂。