Overlay Bild oben auf Plotplot (SVG)

Question

Ich habe ein Diagramm in einem Div, generiert von Plotly (das ist ein SVG-Element). Ich möchte ein Bild darüber legen, aber ich kann nicht herausfinden, wie es geht. Ich habe versucht, die Hintergrundbild-CSS-Eigenschaft auf dem Div auf das Bild zu setzen, aber es wird nicht angezeigt. Weiß jemand wie ich das machen kann?

Answer 1

Einfache Overlay ...

JSFiddle

Code:

<div class="wrapper"> 
    <div class="ploty"> 
    <img src="http://placehold.it/500x300" /> <!-- This would instead be your chart --> 
    </div> 
    <img class="overlay" src="http://lorempixel.com/400/200/food/1/" /> 
</div> 


.wrapper { 
    position: relative; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Dies positioniert img.overlay in der linken oberen Ecke des div.wrapper. Sie können platzieren Sie an beliebiger Stelle durch die Werte der top und left Eigenschaften wie folgt zu ändern:

.overlay { 
    position: absolute; 
    top: 20px; 
    left: 50px; 
}