html中关于背景的设置

1设置背景颜色

取值：英文、rgba、rgb、#000000、hsl(a)

2.背景图片的使用

使用场景：
      ①	常见的logo
      ②	装饰性的小图标
      ③	超大图片
     使用背景图的优点：可以更好的设置位置
      2.1 background-image 设置背景图片
      2.2 当背景图片大小<元素大小=》默认重复图片，将元素铺满
         background-repeat：设置是否平铺
            取值：no-repeat 设置不平铺
                  repeat 设置平铺（默认）
         包括：background-repeat-x(水平方向)和background-repeat-y(垂直方向)
      2.3 设置背景图片在元素中的位置
          background-position 
            取值：
              一个值：代表图片离元素左边的距离，垂直方向默认居中
              二个值：第一个值代表图片离元素左边的距离，第二个值代表图片离元素顶部的距离
              取值的类型：具体数值，方位词：left、right、top、bottom、center
                        百分比：元素本身的宽高
      2.4 设置背景图片的大小
         background-size:
            取值：具体数值 百分比（元素本身的宽高） 
            cover：初始比例进行缩放，是最小一边铺满元素，有可能会出现图片显示不完全
            contain：初始比例进行缩放，只要有一边完成铺满就可以，有可能会出现部分元素区域没有铺满
      2.5 设置背景图片是否固定
          background-attachment
          取值：fixed 固定
               scroll 随着滚动条进行滚动

精灵图

精灵图又称雪碧图，是将小图标集中于一张图片上
优点:
①将多个图片整合为一张图片，浏览器只需要发送一次请求，就可以同时加载多个图片，提高访问效率，提高用户体验
②将多个图片整合为一张图片，减少图片的总大小，提高请求的速度，增加了用户体验