Wie bekomme ich eine JS ID als Hintergrundseite einer Website?

Question

Ich habe diesen Code in der JS-Datei, die mir ein Bild zu streamen:

//Image streamaing! 
function onMessage2(evt) { 
    $("#image").attr('src', 'data:image/jpg;base64,'+evt.data); 
} 

ich es dann wie so in einem Rechteck in HTML-Anzeige:

<div class="row" style="margin-left:0px; margin-right:0px"> 
<img id="image" src=""> 
<canvas id="canvas"></canvas> 
</div> 

Das Problem, das ich habe, ist dass ich den Stream im Hintergrund der Leinwand anzeigen muss, damit ich die Maus/Touch-Eingabe für eine andere Arbeit, die ich brauche, erfassen kann.

Ich habe versucht, die Reihenfolge (Leinwand zuerst dann Bild), aber dann alles, was ich bekomme ist ein großer leerer Bildschirm.

Answer 1

Geben Sie die Eltern relative Position und absolute Position für die Childs dann Overlay-Leinwand des img :

.row{position: relative;} 
.row img, .row canvas{position:absolute; top:0; left:0;} 

<div class="row" style="margin-left:0px; margin-right:0px"> 
<img id="image" src=""> 
<canvas id="canvas"></canvas> 
</div> 

Answer 2

ich das img innerhalb der Leinwand setzen würde. Setzen Sie die Breite und Höhe auf 100%, so dass sie den gesamten Platz in der Zeichenfläche einnehmen und dann ihre Position auf "fixed" setzen und ihr Z-Index auf -1 steht, damit sie nicht im Fluss bleibt und sich im Hintergrund befindet. Hier ist der Css-Code:

#image { 
position:fixed; 
z-index:-1; 
width:100%; 
height:100%; 
} 

Und vergessen Sie nicht, das IMG in die Leinwand zu setzen.

Answer 3

Was ist damit als Hintergrundbild machen mit CSS

<div id="main"> 

$("#main").css("background- image", "url(url of image)"); 

Sorry für die Formatierung ich von meinem Handy bin zu schreiben, aber sie aussehen könnte, erhalten hier Idee