#前端学习笔记#day9 背景 雪碧图

• photoshop下载参考：https://www.cnblogs.com/xuexianqi/p/12493314.html
  
• 背景颜色 background-color: #bfc
  
• 背景图片 background-image:url('./img/2.png')
  
  • 背景图片需要在后面加url，url后面是图片的路径，最好在括号里加上引号。
    
  • 背景颜色和背景图片可以同时设置
    
  • 如果背景图片小于元素，则背景图片会自动在元素中平铺
    
  • 如果背景图片大于元素，将会一个部分背景无法完全显示
    
• 设置背景重复方式 background-repeat: ;
  
  • 可选值：repeat 默认值，背景会沿着x和y轴双方向重复
    
    • repeat-x 沿着x轴方向重复
      
    • repeat-y 沿着y轴方向重复
      
    • no-repeat 背景图片不重复
      
• 背景图片位置 background-position: ;
  
  • top left right bottom center来进行调整，可以写top，也可以写 top left ，top center等
    
  • 通过偏移量来指定背景图片的位置
    
    • 水平方向的偏移量 垂直方向的偏移量 background-position:10px 10px ;
      
• 设置背景范围 background-clip: ;
  
  • 可选值：border-box 默认值，背景会出现在边框下面
    
    • padding-box 背景不会出现在边框下面，只出现在内容区和内边距。
      
    • content-box 背景只会出现在内容区
      
• background-origin背景图片的偏移量计算的原点
  
  • padding-box 默认值，background-position从内边距开始计算
    
  • content-box 背景图片的偏移量从内容区开始计算
    
• background-size 100px 100px ; 第一个值表示宽度 第二个值表示高度。
  
  • cover 图片比例不变把元素铺满
    
  • contain 图片比例不变，将图片在元素中完整显示
    
• background-attachment: ;背景图片是否跟随图片移动
  
  • scroll 默认值 滚动
    
  • fixed 背景图片会固定在页面中
    
• 背景练习 按钮
  
• a是超链接，必须有背景才能显示背景图片，设置宽高
  
• a是行内元素，必须转换为块元素才能显示
  
• 图片属于网页的外部资源，外部资源都需要浏览器单独发送请求加载
  
  • 浏览器加载外部资源时，按需加载，用则加载，不用则不加载。
    
  • 像我们的练习，会先加载link，而hover和Active会在指定状态下加载。
    
• 雪碧图
  
  • 将多个小图片存储到一个大图片里面，然后通过background-position:来调整，可以避免闪烁的问题，我们称这种图为雪碧图。
    
  • 雪碧图使用步骤：
    
    • 先确定要使用的图标
      
    • 测量图标的大小
      
    • 根据测量结果创建一个元素
      
    • 将雪碧图设置为元素的背景
      
    • 设置一个偏移量以显示正确的图片
      
  • 雪碧图的特点
    
    • 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验
      
• 线性渐变
  
  • 通过渐变可以设置一些比较复杂的颜色。可以从一个颜色向其他颜色过渡的效果。
    
  • 渐变是图片，需要通过background-image来设置
    
    • linear-gradient 线性渐变，颜色沿着一条直线发生变化background-image: linear-gradient(red,yellow);红色在开头，黄色在结尾，中间是过渡区域
      
      • background-image: linear-gradient(to right, red,yellow);从左向右渐变，前面加个to right,
        
      • 可以写to left, to right,to bottom,to top或者xxxdeg，deg表示的是度数，也可以top right
        
      • 同时可以设置多个颜色，默认情况下是平均分布
        
      • 也可以手动指定渐变的分布情况background-image: linear-gradient( red 50px,yellow); 相当于从0-50都是纯红，没有过渡效果，50开始渐变
        
    • repeating-linear-gradient()可以平铺的线性渐变
      
      • background-image: repeating-linear-gradient(red 50px,yellow 100px);
        
    • 径向渐变radial-gradient()放射性效果
      
      • background-image:radial-gradient(red , yellow)
        
      • 默认情况下，径向渐变的圆心形状是根据元素的形状进行计算的
        
        • 正方形--圆形
          
        • 长方形--椭圆形
          
        • 我们也可以手动指定渐变的大小（100px 100px 中间不要加逗号）background-image:radial-gradient(100px 100px,red , yellow,green)
          
          • 上面的100px 100px可以改为circle和ellipse
            
        • 我们也可以指定渐变的位置，指定渐变圆心的位置background-image:radial-gradient(100px 100px at 0 0,red , yellow,green) 在100px 100px 后面加上at 0 0，中间没有逗号，表示圆心在00点。at center center
          
• 语法：
  
  • radial-gradient（大小 at位置，颜色 位置，颜色 位置）、
    
    • 大小：
      
      • circle 圆形
        
      • ellipse 椭圆
        
      • closest-side 近边
        
      • closest-corner 近角
        
      • farthest-side 远边
        
      • farthest-corner 远角
        
    • 位置：
      
      • top right left center bottom
        
 

标签：雪碧图,day9,gradient,渐变,100px,笔记,background,image,背景图片
来源： https://www.cnblogs.com/tanyahuang/p/15602673.html