プロットプロット（SVG）の上にオーバーレイ画像

Question

私は、plotly（SVG要素）によって生成されたdiv内のグラフを持っています。私はそれの上にイメージを重ねるが、私はそれを行う方法を理解することはできません。私はdivに画像の背景画像CSSプロパティを設定しようとしましたが、表示されません。私はこれをどのようにすることができるか知っていますか？

Answer 1

シンプルオーバーレイ...

JSFiddle

コード：

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

これはdiv.wrapperの左上隅にimg.overlayを配置します。あなたは、このようなtopとleftプロパティの値を変更することで、あなたが欲しいどこにでも置くことができます。

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

完璧な作品