background详解

            /* 
                参数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：没变形，完全显示了，包含的意思，代表图片一定要被盒子包含，缩放后图片一定小于等于盒子
                                                要两边都缩放到盒子内才停止缩放

                            它们两都是按比例缩放，所以不会变形

                参数5：背景颜色

                多个背景之间用逗号隔开，如果多张背景图片，先写的层级要比后写的更高
            */
            /* background: url(images/girl1.jpg) no-repeat left top / contain red; */

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

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

            background: url(images/girl1.jpg) no-repeat left top / 400px 150px,
                        url(images/girl2.jpg) no-repeat left bottom / 400px 150px;
        }

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

            /* 下面两种写法都可以 */
            /* background: url(images/pl.png) no-repeat left top / contain red; */
            background-image: url(images/pl.png);
        }
    </style>