在某些背景图片上使用css3的降雪效果

Question

I have developed web page which is having snowfall effect using CSS3 and it is working fine. Refereed this link : -
http://designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/

But I am not able to do it with predefined background. I am having one background image and i want to fall snow on that image. I am not sure how I should achieve that.Tried a lot. Can anybody share his/her idea regarding this?

    body {
    background: url('configAssets/images/img.png'), url('configAssets/images/snow.png'), 
   url('configAssets/images/snow3.png'), url('configAssets/images/snow2.png');
}

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:transparent;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

.snow {
    -webkit-animation: snow 40s linear infinite;
    -moz-animation: snow 40s linear infinite;
    -ms-animation: snow 40s linear infinite;
    animation: snow 40s linear infinite;
}

Answer 1

You need to make sure your original background image is the last in line. See Stacking Order of Multiple Backgrounds

background-image: url('snow.png'), url('snow2.png'), url('snow3.png'),
 url('configAssets/images/img.png');

body {
    background-color: #6b92b9;
    background-image: url('snow.png'), url('snow2.png'), url('snow3.png'),url('configAssets/images/img.png');

    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}