关于div的背景图片的问题

Question

问题描述：我现在需要在js文件中动态的create一个div，然后给这个div添加一个背景图片，然后在图片上插入一段文字，请问如何实现？（如果感觉我说的不太清楚，可看http://bbs.esrichina-bj.cn/ESRI/attachment.php?aid=81396&k=2764b705781de47aa49c5c8a223c20da&t=1272445115&noupdate=yes&sid=50cbNL7C4f69PKW7TWwV5ATk2LMGY9i1%2BiaJpyTJV36tXjQ这张图片，我现在做的就是在那些蓝色的小泡上面加编号，可是蓝色的小泡的图片出不来）我用如下代码做，但是连背景图片都出不来，更不说插入的文字了。
         var div = document.createElement("div");
         div.style.left = 24;
div.style.top = 57;
div.style.zIndex = 100;
         div.style.cursor = "hand";
         div.style.position = "absolute";
         div.style.backgroundImage = "url(../images/bubble/littlebubble.gif)";
         div.innerHTML = "第一个";

Answer 1

 var div = document.createElement("div");
  div.style.left = 24;
div.style.top = 57;
div.style.zIndex = 100;
  div.style.cursor = "hand";
  div.style.position = "absolute";
  div.style.backgroundImage = "url(../images/bubble/littlebubble.gif)";
  div.innerHTML = "第一个";
document.body.appendChild(div);

Answer 2

在图片上加文字不可能办到，可以在图片上加上一个浮动的层，在其上插入文字，这样和html没有区别

Answer 3

var highlight = document.getElementById("highlight");
highlight.appendChild(div);
document.body.appendChild(highlight);因为我会生成很多个div  所以我把这些div都放在highlight这个div里面，然后把highlight放在body中

Answer 4

我这个图片是div的背景图片啊，然后我在这个div中插入字符

Answer 5

div.style.left = x-24;
div.style.top = y-57;
div.style.zIndex = 100;
        div.style.cursor = "hand";
        div.style.position = "absolute";
div.innerHTML = "<img src='images/bubble/littlebubble.gif'>";
这样子可以插入图片，但是就没法在上面写字了

Answer 6

你的highlight如果是原来页面中就有的就不用document.body.appendChild(highlight)了
你直接往highlight中append就行了

Answer 7

.highlight{
background-color:#FF0000;
padding:2px;
width:12px;
font-size:12px;
color:#FFFFFF;
position:absolute;
border:1px solid #FFFFFF;
}
var div=document.createElement("div");
div.className="highlight";
div.style.left=value[0];
div.style.top=value[1];
div.style.zIndex=100+i;
div.innerHTML=i+1;
这样子的话可以显示一个方块，而且可以写字，但是我现在需要的是图片

Answer 8

if(!highlight){
highlight = document.createElement("div");
highlight.id = "highlight";
}
我在之前判断是否存在这个div的，页面中不存在的

Answer 9

我把我的图片换成gif的也不能显示。

Answer 10

如果highlight也是由document创建的
那你就得用document.body.appendChild(highlight)了

Answer 11

那你调整下url看看吧
我这里测试的结果就是我说的这样。

Answer 12

一个../images/ 一个 images/

Answer 13

div.style.width = "20px";
        div.style.height = "20px";
这样子 还不行

Answer 14

对，有很多图片是不行的，你试试其他的png或者jpg或者gif的多试试，浏览器有时就是挺怪的

Answer 15

直接在body中写你要生成的DIV
显示正常了 在考虑把DIV变成 js create版本的