background参数

        /* 
            background:参数1 参数2 参数3 / 参数4 参数5;
            参数1：图片路径
            参数2：是否平铺
                        repeat：默认值代表水平和垂直都平铺
                        no-repeat 代表不平铺
                        repeat-x 水平平铺
                        repeat-y 垂直平铺
            参数3：图片位置 默认在0 0 或者说是在 left top
                        第一个值：水平位置 给具体的px值代表距离左边多少
                        第二个值：垂直位置 给具体的px值代表距离上边多少
                        还可以给百分比,代表图片的百分比要重叠在盒子的百分比那个位置上

                        给方向： 
                            水平方向：left center right
                            垂直方向：top center bottom

            参数4：图片大小 默认是图片大小
                  必须在参数3后面加一个 / 
                  可以给具体的像素大小，还可以给百分比
                  这里可以写两个特殊单词：
                   cover： 有一部分没显示，覆盖的意思，代表图片一定要覆盖盒子,缩放后图片一定会大于等于盒子只要有一边缩放到了盒子内就停止缩放
                   contain：没变形，完全显示了，包含的意思，代表图片一定要被盒子包含，缩放后图片一定小于等于盒子要两边都缩放到盒子内才停止缩放

                     cover和contain都是按比例缩放，所以不会变形

            参数5：背景颜色

            多个背景之间用逗号隔开，如果多张背景图片，先写的层级要比后写的更高
            background: url(@/assets/logo2.png) no-repeat 60% center/ 240px auto,
                      url('@/assets/login_bg.jpg') no-repeat center / cover
                      
        */
        /* background: url(@/assets/1.jpg) no-repeat left top / contain blue; */

        /* background是一个复合属性（集成属性），意思是说它由好多个子属性组成 */
        /* background-image: 图片路径 */
        /* background-repeat: 是否平铺 */
        /* background-position-x: 
        background-position-y:  */
        /* background-size:  */
        /* background-color:  */

        /* 所以加背景颜色也可以直接写background */
        /* background: red; */

        background: url(@/assets/1.jpg) no-repeat left top / 400px 200px,
                    url(@/assets/2.jpg) no-repeat left bottom / 400px 200px;
    }

    .box:hover{
        /* background: url(@/assets/l.png); 不要这样写，因为这样写会覆盖后面的那些已经设置好的值 */

        /* 下面两种写法都可以 */
        /* background: url(@/assets/1.png) no-repeat left top / contain blue; */
        background-image: url(@/assets/1.png);
    }