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

Question

需求描述

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

​

​

我的代码进展

• 首先，我将每个动态检索到的数字放在自己的div标记中，并为每个标记动态设置背景图像。下面是d3 JavaScript代码： careerstage_td.append("div") .text(函数(D){返回d.count }) .attr(“类”，“职业计数”).style(“颜色”，函数(D){返回d.color;}) .style(“背景-图像”，函数(D){返回“url”(‘图像/“+ d.icon +”’)；}).style(“背景-重复”，“不重复”).style(“背景-位置”，“中间中心”)； (请注意，我正在使用一个函数来动态填充数字以及确定要覆盖的图像) 这给了我以下预期结果，即图片在文本后面：

​

​

• 下一步是找出如何将背景图像覆盖在文本的顶部。为此，我开始在谷歌( google )上搜索，并在以下网站上发现了这个问题：如何叠加图像。在这里，我确定了两个不同的解决方案： 解决方案1：(从页面的顶部答案)在div中添加一个带数字的span，然后使用css将其绝对定位在中心，如下所示 span.stickperson {职位:绝对；左:45%；顶部: 34%；} 解决方案2：(来自页面上的另一个答案)添加以下css，它用动态文本扩展div类，如下所示 职业计数：{ content: url(/images/person_assoc.gif)之后；职位:绝对；左:45%；顶部: 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上玩了。

以看到弹琴了为例。(请注意，我使用了一个简化的数据集，因此我总是将图像作为背景，并使用相同的文本颜色)。

要确保图标显示在父节点的中间，关键是将父节点定义为position:relative，子节点定义为absolute，宽度和高度为100%。以背景为中心，x和y都可以完成这项工作。