学习——第十三天

解决图片闪烁问题，提高网站的性能，可以使用 雪碧图/精灵图 ,学名：图片整合技术

      实现原理：

        将多张图片整合在一起，然后一次性引入到网站中，

          减少网络请求，以提高网站的性能

      实现步骤：

        1、先确定好你要使用哪个图片或者图标

        2、测量图片的大小  例如：290*300

        3、根据测量的结果去建一个盒子，对外展示

        4、将图片作为背景图引入到盒子中

        5、设置图片的位置，以正确的显示图片

         background-position：水平方向 垂直方向值；

           水平方向：正值  图片向右，负值  图片向左

           垂直方向：正值  图片向下，负值  图片向上

渐变：通过渐变可以设置一些复杂的背景颜色，

        可以从实现一个颜色向其他颜色过渡的效果.

  渐变是图片，通过 background-image设置

    可选值

      1：linear-gradient(方位,颜色1,颜色2)  ['ɡreidiənt]

        线性渐变，颜色沿着一条直线发生变化  

            参数1:表示方位，（可选值，不写默认是to bottom）

                    (1)to left，to right, to bottom, to top

                    (2)xxdeg 表示角度，度数，会更灵活,正值顺时针，负值逆时针

                    (3)turn 表示圈  .5turn，一圈表示360度

            参数2:颜色1

            参数3:颜色2

            注意：

                可以写多个颜色，默认情况下，颜色是均分占比的

                  也可以手动的指定渐变的分布情况

                background-image:linear-gradient(red 50px,yellow) ;

                    颜色后直接跟占比

      2:repeating-linear-gradient()

        可以平铺的线性渐变

        background-image: repeating-linear-gradient(yellow 0px, red 50px);

          参数跟linear-gradient是一样的