How do I concatenate this CSS background image url correctly?

Question

I have the following CSS for a banner like image (external CSS file):

.banner {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba( 255, 255, 252, 0.8 )), url('banners/imageA.jpg');
}

and I have a function that changes the background image but also uses the parameter for other things.

function bannerchange(element)    {
    document.getElementById('banner').style.backgroundImage = "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba( 255, 255, 255, 0.8 )), url('banners' + element + .jpg\')";
    document.getElementById('bannertext').innerHTML = element;
    document.getElementById('infotext').src = 'infotexts/' + element + '.txt';

I have no trouble setting the new background image by static url

 document.getElementById('banner').style.backgroundImage = "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba( 255, 255, 255, 0.8 )), url(banners/element.jpg)";

However any combination of concatenations I tried fail to load the image correctly with the function parameter, eg

url('banners/' + element + '.jpg')";

and variations.

What is the correct way to use this? I give up.

Answer 1

只需使用双引号如下：

document.getElementById('banner').style.backgroundImage = "linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba( 255, 255, 255, 0.8 )), url(banners/" + element + ".jpg)";