如何將背景圖片添加到火花動畫橫幅？

Question

我已經使用tween-lite提供了一個火花動畫的codepen片段。我曾嘗試添加背景圖片片段，但它沒有奏效。請人幫忙添加背景圖片

CSS：

body { 
    background-color: #13001C; 
} 
html, body { 
    height: 100%; 
    overflow: hidden; 
} 
.spark { 
    background-color: #DE4A00; 
    font-family: 'Helvetica', sans-serif; 
    visibility: hidden; 
    position: absolute; 
    width: 4px; 
    height: 4px; 
    border-radius: 30%; 
    box-shadow: 0 0 5px #AB000B; 
} 

的Javascript：

var density = 70, 
    speed = 2, 
    winHeight = window.innerHeight, 
    winWidth = window.innerWidth, 
    start = { 
     yMin: winHeight - 50, 
     yMax: winHeight, 
     xMin: (winWidth/2) + 10, 
     xMax: (winWidth/2) + 40, 
     scaleMin: 0.1, 
     scaleMax: 0.25, 
     scaleXMin: 0.1, 
     scaleXMax: 1, 
     scaleYMin: 1, 
     scaleYMax: 2, 
     opacityMin: 0.1, 
     opacityMax: 0.4 
    }, 
    mid = { 
     yMin: winHeight * 0.4, 
     yMax: winHeight * 0.9, 
     xMin: winWidth * 0.1, 
     xMax: winWidth * 0.9, 
     scaleMin: 0.2, 
     scaleMax: 0.8, 
     opacityMin: 0.5, 
     opacityMax: 1 
    }, 
    end = { 
     yMin: -180, 
     yMax: -180, 
     xMin: -100, 
     xMax: winWidth + 180, 
     scaleMin: 0.1, 
     scaleMax: 1, 
     opacityMin: 0.4, 
     opacityMax: 0.7 
    }; 

function range(map, prop) { 
    var min = map[prop + 'Min'], 
     max = map[prop + 'Max']; 
    return min + (max - min) * Math.random(); 
} 

function sign() { 
    return Math.random() < 0.5 ? -1 : 1; 
} 

function randomEase(easeThis, easeThat) { 
    if (Math.random() < 0.5) { 
     return easeThat; 
    } 
    return easeThis; 
} 

function spawn(particle) { 
    var wholeDuration = (10/speed) * (0.7 + Math.random() * 0.4), 
     delay = wholeDuration * Math.random(), 
     partialDuration = (wholeDuration + 1) * (0.2 + Math.random() * 0.3); 
    TweenLite.set(particle, { 
     y: range(start, 'y'), 
     x: range(start, 'x'), 
     scaleX: range(start, 'scaleX'), 
     scaleY: range(start, 'scaleY'), 
     scale: range(start, 'scale'), 
     opacity: range(start, 'opacity'), 
     visibility: 'hidden' 
    }); 
    // Moving upward 
    TweenLite.to(particle, partialDuration, { 
     delay: delay, 
     y: range(mid, 'y'), 
     ease: randomEase(Linear.easeOut, Back.easeInOut) 
    }); 
    TweenLite.to(particle, wholeDuration - partialDuration, { 
     delay: partialDuration + delay, 
     y: range(end, 'y'), 
     ease: Back.easeIn 
    }); 
    //Moving on axis X 
    TweenLite.to(particle, partialDuration, { 
     delay: delay, 
     x: range(mid, 'x'), 
     ease: Power1.easeOut 
    }); 
    TweenLite.to(particle, wholeDuration - partialDuration, { 
     delay: partialDuration + delay, 
     x: range(end, 'x'), 
     ease: Power1.easeIn 
    }); 
    //opacity and scale 
    partialDuration = wholeDuration * (0.5 + Math.random() * 0.3); 
    TweenLite.to(particle, partialDuration, { 
     delay: delay, 
     scale: range(mid, 'scale'), 
     autoAlpha: range(mid, 'opacity'), 
     ease: Linear.easeNone 
    }); 
    TweenLite.to(particle, wholeDuration - partialDuration, { 
     delay: partialDuration + delay, 
     scale: range(end, 'scale'), 
     autoAlpha: range(end, 'opacity'), 
     ease: Linear.easeNone, 
     onComplete: spawn, 
     onCompleteParams: [particle] 
    }); 
} 
window.onload = createParticle; 

function createParticle() { 
    var i, particleSpark; 
    for (i = 0; i < density; i += 1) { 
     particleSpark = document.createElement('div'); 
     particleSpark.classList.add('spark'); 
     document.body.appendChild(particleSpark); 
     spawn(particleSpark); 
    } 
} 

Codepen鏈接： http://codepen.io/stephjiayi/pen/QwvjMZ

Answer 1

你可以嘗試添加BAC

這樣的：身體，而不是背景色kground圖像

body { 
    background-image:url('image/bg.png'); 
}