求大神赐教，为什么我的图片背景background-image设置没有效果？？

我想创建一个div盒子，背景为一个图片，可是显示只有空边框，怎么没有图片？？

<!DOCTYPE html >
<html >
<head>
<meta  charset="utf-8" />
<title>我的动画</title>
</head>
 <body>
<script>
div=document.createElement("div");
div.setAttribute("style","width:100px;  height:100px;  background-image:url(幻片灯.gif);   border:red 1px groove;   background-repeat:no-repeat; background-position:left center;  overflow:hidden;  ");
document.body.appendChild(div);
</script>

</body>
</html>

少用英文名为好，以及把你的图片放在一个文件夹下面

这个问题本质上是 urlencode 的问题
幻灯片.gif 实际上的地址是 %E5%B9%BB%E7%81%AF%E7%89%87.gif
所以正确的代码应该是

<!DOCTYPE html >
<html >
<head>
<meta  charset="utf-8" />
<title>我的动画</title>
</head>
 <body>
<script>
var div=document.createElement("div"),
    attr = "width:100px;  height:100px;  background-image:url(幻片灯.gif);   border:red 1px groove;   background-repeat:no-repeat; background-position:left center;  overflow:hidden;  ";

div.setAttribute("style", encodeURIComponent(attr));

document.body.appendChild(div);
</script>

</body>
</html>

记住，很多你不知道的问题，往往就是因为你的文件名或者文件夹名使用了中文。

所以，把你的图片的文件名改为英文就可以了。

个人认为可能有如下原因：
1.使用了中文名字（一般能不用中文尽量不用）；
2.文件名没用引号包裹起来（这个我不知道对不对，但是我一直都是用引号的）；
3.路径错了（检查一下）；

【热门文章】