Question

我需要使用PURE javascript（无JQuery或其他库）设置背景图片。

我使用以下所示的javascript设置背景图片。 Firefox控制台，检查器网格和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;
}

该元素只是嵌套在<body>

中的div

<html>
    <body>
        <div id="shadow"></div>
    </body>
</html>

Answer 1

透明的拼写错误不仅包含图片的网址，而且还包含图片的网址

var shadow = document.getElementById("shadow");
shadow.style.backgroundColor = "transparent";
shadow.style.opacity = "1";
shadow.style.backgroundImage = "url('image+address')";

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

<html>
    <body>
        <div id="shadow"></div>
    </body>
</html>

Answer 2

对于style.backgroundImage属性，您需要一个图像路径，例如"url('image.png')"。否则，将图像URL分配给变量image。

Answer 3

您在这里做的太多了。不需要opacity或transparent或backgroundColor。只需将background设置为图像即可。

但是，在CSS中，每当需要为属性提供路径时，都需要使用url()函数来传递该路径，而您似乎并没有这么做。

// Best practice: don't set individual properties on the 
// style of an element. Add/remove pre-made classes.
document.querySelector("div").classList.add("background");

body { background-color:#e0e0e0; }
div { width:150px; height:150px; border:1px solid black; padding:10px;}

.background {
  /* Just set the background property using url(path). That's it. */
  background:url("http://www.thetherapystore.com.au/wp-content/uploads/2015/06/SSMILE.jpg");
  
  background-size:contain; /* Only used here to scale the image to fit */
}

<div>This content is in the foreground.</div>

Answer 4

您可以提供“图片”变量吗？我用一个网址替换了您的var，并且效果很好。

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

此外，尝试通过CSS添加一些背景属性，例如background-size。

尽管出现在浏览器控制台中的背景图像，但背景图像未显示

4 个答案: