html - 一部の背景画像で css3 を使用した降雪効果

Question

CSS3 を使用して降雪効果のある Web ページを開発しましたが、正常に動作しています。このリンクを参照してください： -
http://designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/

しかし、事前定義された背景ではできません。背景画像が 1 つあり、その画像に雪を降らせたいです。どうすればそれを達成できるかわかりません。たくさん試しました。誰でもこれに関する彼/彼女の考えを共有できますか?

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