<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;