How to add add chart over the image

问题

I have an image in my div.Image is nothing looking like box.Now i want to insert bar chart(highchart library dynamic content) over the image.I mean inside that box image.How to do that?

What i have tried

<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>

here card1.png is box image.There are three cards,i need to insert 3 charts inside the 3 boxes individually.

回答1:

Code you sent is really ugly and isn't using CSS the right way. You want to separate CSS in another file and include it to your html with LINK tag. You want to use cascading style sheets, so you don't have to repeat same code so many times.

But if you want to stick to this type of code you can do it this way:

<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>

回答2:

Do something like this:

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

I suggest making the div have a class and doing all the css code in a .css document

来源：https://stackoverflow.com/questions/48924323/how-to-add-add-chart-over-the-image