Web前端——背景、精灵图

1.背景

    <!--

        1.设置背景颜色 background-color

            取值：英文、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 随着滚动条进行滚动

      -->

2.精灵图（雪碧图）

    <!--

        精灵图又称雪碧图，是将小图标集中于一张图片上

        优点:

         ①将多个图片整合为一张图片，浏览器只需要发送一次请求，就可以同时加载多个图片，提高访问效率，提高用户体验

         ②将多个图片整合为一张图片，减少图片的总大小，提高请求的速度，增加了用户体验

     -->

3.简写用backgroud一个代替所有

    <!-- 背景简写属性：background -->

           /* 当设置背景时有方向和大小时，书写：方向/大小*/