Javascript 背景图像不显示，尽管在浏览器控制台中设置为显示

我需要使用纯javascript（没有JQuery或其他库）设置背景图像

我使用如下所示的javascript设置背景图像。Firefox控制台、inspector网格和CSS引擎都显示了背景图像的真实性。我已经成功地设置了背景色，表明元素没有隐藏，并且我没有选择错误的元素。正如下面的代码所示，我尝试过使用不透明度和背景色。这是徒劳的。在悬停图像URL时，Firefox显示图像实际上已正确加载

以下是我的javascript：

var shadow = document.getElementById("shadow");
shadow.style.backgroundColor = "transparant";
shadow.style.opacity = "1";
shadow.style.backgroundImage = image;

程序启动时应用于元素的CSS

div#shadow
{
    opacity: 0;
    position: absolute;
    top: 315px;
    left: 721px;
    width: 48px;
    height: 48px;
}

元素只是嵌套在

---

图像url（而不仅仅是名称）出现透明拼写错误

var shadow=document.getElementById（“shadow”）；
shadow.style.backgroundColor=“透明”；
shadow.style.opacity=“1”；
shadow.style.backgroundImage=“url（'image+address'）”
div#shadow
{
不透明度：0；
位置：绝对位置；
顶部：315px；
左：721px；
宽度：48px；
高度：48px；
}

对于
style.backgroundImage
属性，您需要一个图像路径，如
“url（'image.png'）”
。否则，将图像URL分配给变量
image
您在这里做的太多了。不需要
不透明度
或
透明
或
背景色
。只需将
背景设置为图像

但是，在CSS中，无论何时需要为属性提供路径，都需要使用函数传递该路径，而您似乎没有这样做


//最佳做法：不要在
//元素的样式。添加/删除预先制作的类。
document.querySelector（“div”）.classList.add（“后台”）
body{背景色：#e0；}
div{宽度：150px；高度：150px；边框：1px纯黑色；填充：10px；}
.背景{
/*只需使用url（路径）设置后台属性即可*/
背景：url（“http://www.thetherapystore.com.au/wp-content/uploads/2015/06/SSMILE.jpg");
背景大小：contain；/*仅在此处用于缩放图像以适应*/
}
此内容位于前台。
能否提供您的“图像”变量？我用一个url替换了你的var，效果很好

shadow.style.backgroundImage = "url('http://placehold.it/300x300')";

另外，尝试通过CSS添加一些背景属性，可能是背景大小。
您有一个错误。它是透明的，而不是透明的。您的图像变量需要采用以下格式：“url（'）”；shadow.style.backgroundImage=“url（'）”；例如，backgroundColor的默认值是“transparent”，因此该行可能会被删除。不幸的是，这不起作用，因为在显示代码之前只发现了几行背景图像。@AdithyaLaakso这是什么意思？请澄清。如果您必须使用
style
属性设置背景，那么很好，但您仍然必须使用
url（）
函数设置背景。可能会选择大约10000个不同的背景图像，该列表几乎每天都在不断增长。我无法为所有这些创建css类。@AdithyaLaakso是的，您已经表达了这一点，我说过您仍然需要使用url（）css函数才能在css中设置背景图像。只需通过JavaScript即可，但您仍然需要如下设置背景：
element.style.backgroundImage=“url（“+imagePathVariable+”）图像变量等于“url（'swark.png'）”。我试着改变背景尺寸。这没有帮助。我不确定您希望我更改哪些其他属性。
shadow.style.backgroundImage = "url('http://placehold.it/300x300')";