Javascript 如何在动态填充的div上覆盖动态选择的图像

需求描述：

我使用d3解析.csv文件中的数据，然后动态填充页面上的各种项目。一节如下所示：

我的代码进度：

• 我首先将每个动态检索到的数字放在它自己的div标记中，并为每个动态检索到的数字设置背景图像。以下是d3 JavaScript代码：

  careerstage_td.append("div")
  .text(function(d){ return d.count })
  .attr("class", "career-count")
  .style("color", function(d){return d.color;})
  .style("background-image", function(d){return "url('images/" + d.icon + "')";})
  .style("background-repeat", "no-repeat")
  .style("background-position", "center center");
  

  （请注意，我正在使用一个函数动态填充数字，并确定要覆盖的图像）
  这给了我以下预期结果，其中图像位于文本后面：

• 下一步是找出如何在文本顶部覆盖背景图像。为此，我开始在谷歌上四处搜索，发现了这样一个问题：。在这里，我确定了两种不同的解决方案：
  解决方案1：（从该页的顶部答案）在div中添加一个带有数字的span，然后使用css将span绝对定位在中间，如下所示

  div.career-count span.stickperson
  {
      position:absolute;
      left:45%;
      top: 34%;
  }
  

  解决方案2：（来自该页面上的另一个答案）添加以下css，用动态文本扩展div类，如下所示

  .career-count:after
  {
      content: url(/images/person_assoc.gif);
      position: absolute;
      left:45%;
      top: 34%;
  }
  

这两种解决方案都可以工作，但解决方案1只在Chrome中工作，解决方案2不允许我动态设置图像，因为它都是在css中完成的，并且“after”结构不能在线使用

如果能帮助我找到一个解决方案，使我能够动态设置图像，并能在Chrome、Firefox25和IE11中工作，我将不胜感激

---

编辑：谢谢大家的支持票。我现在添加了图像：）

事实上，我认为最好的解决方案不是在放置文本的

div

元素中添加背景图像，而是为您创建的每个

div

创建一个子

div

，并在子元素中处理图像

careerstage_td.selectAll('div')
    .data(dataset)
    .enter().append('div')
    .attr("class", "career-count")
    .text(function(d){return d;})
    .style("color", function(d){return d.color;})
    .append('div')
    .attr("class", "childClass")
    .style("background-image", function(d){return "url('images/" + d.icon + "')";})
    .style("background-repeat", "no-repeat")
    .style("background-position", "center center");

在给定的代码中，我根据数据生成div，并为每个

div

添加一个新的

div

（classnames“childClass”）。现在我可以在这个儿童班上玩了

举个例子。（注意，我使用了一个简化的数据集，所以我总是将图像作为背景，并使用相同的文本颜色）

---

确保父节点中间图标显示的诀窍是定义父级为“代码>位置：相对和子级为“代码>绝对值/代码>，宽度和高度为100%。将背景集中在x和y上就可以了。

您是否尝试过在第一组

div

s上不设置背景图像，然后添加一组相同的

div

s，并将图像作为背景？@Lars:上面的解决方案1与您所说的类似，在这一点上，我用文本覆盖div顶部的一个跨距，并将图像作为内容添加到该跨距中。我用div而不是span标记尝试了相同的解决方案，它仍然只显示在Chrome中。我将添加图像作为背景图像而不是内容，然后看看会发生什么。拉斯克托夫：我试过你的建议了。它在所有三个浏览器中都没有显示任何内容，所以我现在回到解决方案1。我最喜欢解决方案1的一点是需要一个单一的css定义。如果我要使用解决方案2，我必须为每个块创建一个单独的css定义，以定义相应的图像前景。解决方案2的优点在于它可以在所有浏览器上运行，并且不需要在html端添加额外的元素。您可以发布一个完整的工作示例吗？那会让你玩起来更容易。谢谢。我将尝试一下，并给出我的结果，尽管在我上面的描述中，与解决方案1似乎没有太大区别。看起来主要的区别在于您使用的是z索引而不是轴定位。我错了吗？嗯，不，实际上你可以删除z索引，它也可以在没有。它可能看起来像解决方案1，但a）所有现代浏览器都支持它b）没有%猜测来居中元素（左：45%；右：34%）。由于子Div与parentDiv的大小完全相同（100%宽度和高度），并且处于相同的位置（绝对，相对于相对的父Div），因此无需同时使用两个轴位置。特别是因为简单地为背景定义“中心”就可以为你做数学计算。这个解决方案奏效了。Lars Kotthoff提出了与您相同的建议，但他忽略了这一部分：宽度：100%；身高：100%；正因为如此，它没有显示div。现在我让它在Chrome、Firefox和IE上工作。非常感谢leMoisela！