javascript - 将网络摄像头变成拉伸(stretch)/缩放背景图像

Question

将 javascript 连接到 css div。

我已经为一些驱动网络摄像头的 javascript 提供了一些新功能，例如延迟和仅在艺术元素成功上传时显示。

但是我不能再(出于某些愚蠢的原因)将它连接到我的 css 而不覆盖我所做的更改。 这样我的简单网络摄像头就可以成为一张背景图片，可以拉伸(stretch)到页面上的大小。

(请看下文)

我希望网络摄像头背景图像能够动态缩放，但我认为这在这种情况下是不可能的。

我相信你们更了解情况

编辑:抱歉，我不够清楚。所以我想让下面看到的网络摄像头 javascript 作为我页面上的背景图片。我正在尝试将网络摄像头 jpg 变成背景图像。我怎么不知道如何将两者联系起来而不影响我所做的更改。

所以如果 javascript 可以连接到下面的 css 示例，它应该将它变成一个拉伸(stretch)背景图像。

• 它不会让我将网络摄像头连接到所示的 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')"