如何在动态填充的div上叠加动态选择的图像

Question

要求说明：

我正在使用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");
  

  （请注意，我正在使用一个函数来动态填充数字以及确定要叠加的图像）

  这给了我以下预期结果，其中图像在文本后面：

• 下一步是弄清楚如何在文本顶部叠加背景图像。为此我开始在谷歌上挖掘并在SO上发现了这个问题：How to overlay images。在这里，我确定了两种不同的解决方案：

  解决方案1 ​​ :(从该页面的顶部答案）在div中添加一个带有数字的范围，然后使用css将范围绝对放在中心，就像这样

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

  解决方案2 :(来自该页面上的其他答案）添加以下用动态文本扩展div类的css，如下所示

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

两种解决方案都有效，但解决方案1仅适用于Chrome，而解决方案2不允许我动态设置图像，因为它全部是在css中完成的，并且'after'contruct不能在线使用。

我很感激帮助找出一个允许我动态设置图像的解决方案，也适用于Chrome，Firefox 25和IE 11。

编辑：感谢大家投票。我现在添加了图片：）

Answer 1

实际上我认为最好的解决方案不是在您放置文字的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（类名“childClass”）。现在我可以玩这个childClass。

See the jsfiddle举个例子。 （请注意，我使用了一个简化的数据集，因此我总是将图像作为背景推送，并且使用相同的文本颜色。）

确保图标显示在父节点中间的技巧是将父级定义为position:relative，将子级定义为absolute，宽度和高度为100％。将背景居中在x和y上都可以完成工作。