CSS3 多重背景图片

<div></div>
 
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 190px;
            border: 1px solid #000;
            margin: 100px auto;
            background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png);
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: 50px 50px, 50px 50px, auto auto;
            background-position: 50px 150px, 400px 50px, 0px 0px;
            animation: move 10s linear 0s infinite normal;
        }
        @keyframes move {
            from{
                background-position: 50px 150px, 400px 50px, 0px 0px;
            }
            to{
                background-position: 500px -150px, 400px 50px, -600px 0px;
            }
        }
    </style>

注意：

        多张背景图片之间用逗号隔开即可
        注意点:  先添加的背景图片会盖住后添加的背景图片 ； 建议在编写多重背景时拆开编写

 /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/
 background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
 background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, right top, left bottom;