Question

对于像横幅这样的横幅（外部CSS文件），我有以下CSS：

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

并且我有一个功能可以更改背景图像，但也可以将参数用于其他用途。

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

我可以通过静态网址轻松设置新的背景图片

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

但是，我尝试的任何串联组合均无法使用function参数正确加载图像，例如

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

和变体。

正确的使用方法是什么？我放弃。

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

如何正确连接此CSS背景图片网址？

1 个答案: