如何在图像上添加添加图表

Question

我的div中有一个图像。图像看起来不像盒子。现在我想在图像上插入条形图（高图库动态内容）。我的意思是在那个盒子里面。如何做到这一点？

我尝试了什么

<div class="" style="position:relative">
<div style="position:absolute; top:0; left:0">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
</div>

这里 card1.png 是盒子图片。有三张卡片，我需要在3个盒子中分别插入3张图片。

Answer 1

您发送的代码非常难看，并且没有正确使用CSS。 您想在另一个文件中分离CSS并将其包含在带有LINK标记的html中。您希望使用级联样式表，因此您不必多次重复相同的代码。

但是如果你想坚持使用这种类型的代码，你可以这样做：

<div class="" style="position:relative; width: 400px; height: 750px;">
  <div style="position:absolute; top:0; left:0; z-index: 1;">
    <img class="" src="img/card1.png" alt="" style="width:400px;" />
  </div>
  <div style="position:absolute; top:0; left:0; z-index: 2;">
    Your first chart goes here
  </div>
  <div style="position:absolute; top:250px; left:0; z-index: 1;">
    <img class="" src="img/card1.png" alt="" style="width:400px;" />
  </div>
  <div style="position:absolute; top:250px; left:0; z-index: 2;">
    Your second chart goes here
  </div>
  <div style="position:absolute; top:500px; left:0; z-index: 1;">
    <img class="" src="img/card1.png" alt="" style="width:400px;" />
  </div>
  <div style="position:absolute; top:500px; left:0; z-index: 2;">
    Your third chart goes here
  </div>
</div>

Answer 2

做这样的事情：

<div style="background-image: url(); background-size: ; background-repeat: no-repeat;">
    <p>whatever you want to put inside</p>
</div>

我建议让div有一个类并在.css文档中执行所有css代码