將網絡攝像頭變成拉伸/縮放背景圖像

Question

將JavaScript連接到CSS div。

我已經提供了一些Javascript，它們可以驅動網絡攝像頭一些新功能，例如延遲，並且僅在為藝術項目成功上傳后才顯示。

但是，我不能（出於某些愚蠢的原因）將其連接到CSS而不覆蓋我所做的更改。 這樣，我的簡單網絡攝像頭就可以成為可以在頁面上擴展到一定尺寸的背景圖像。

（請參閱下文）

我希望網絡攝像頭的背景圖像能夠動態縮放，但我認為在這種情況下這是不可能的。

我敢肯定你們的人更了解

編輯：對不起，我還不夠清楚。 所以我想讓下面看到的網絡攝像頭javascript作為我頁面上的背景圖像。 我正在嘗試將網絡攝像頭jpg轉換為背景圖像。 我怎么不知道如何將兩者聯系起來，而不是依靠我所做的更改。

因此，如果javascript可以連接到下面的css示例，則應將其轉換為拉伸的背景圖片。

• 它不會讓我將網絡攝像頭連接到所示的CSS示例。 我不明白如何讓CSS發揮所有功能。**

我希望這能清除我的要求。

與通過元素ID引用元素有關？

編輯：結束

 <script type="text/javascript">
$(document).ready(function(){

function reloadBackground() {
        var d = new Date().getTime();
        d -= 15; // delay
    url = "http://www.panopticbedroom.com/templates/live.jpg?" + d;
        var img = new Image();

        img.onload = function(){
              $('#divBackground ').html('').append($(this));
        }


        img.src = url;
}

setInterval(reloadBackground, 1000);

function getDocHeight() {
    var doc = document;
    return Math.max(
        Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
        Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
        Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    );
}

});
</script>

這是相關的CSS：

#divBackground {
background-image: url(http://www.panopticbedroom.com/templates/live.jpg)
position: absolute;
}

img#imgBackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

我真的很感謝任何建議！

祝一切順利，

路易斯

Answer 1

使用此CSS代碼到img容器

background-attachment:fixed;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='source of image',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='source of image', sizingMethod='scale')"