如何在动态填充的 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 中添加一个 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 中完成的，并且“后”结构不能内联使用。

如果我能帮助我找出一个解决方案，让我可以动态设置图像并且也适用于 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 上就可以了。