2013-04-02 94 views
1

将javascript连接到css div。将摄像头转换为拉伸/缩放背景图像

我已经给出了一些JavaScript驱动网络摄像机一些新的功能,如延迟和只有当它成功上传艺术项目时显示。

但是我不能再(为了一些愚蠢的原因)将它连接到我的css而不覆盖我所做的更改。 这样我的简单网络摄像头就可以成为一个可以在页面上伸展的背景图片。

(请参见下文)

我很想有网络摄像头的背景图像是动态调整,但我不认为那不是可以在这方面。

我敢肯定,你们这些人是更明智的

编辑:抱歉,我不太清楚。 所以我想有摄像头javascript下面看到作为我的网页上的背景图像。我试图让网络摄像头JPG变成背景图像。我怎么都不知道如何将两者连接起来,而不是借着我所做的改变。

所以如果javascript可以连接到下面的css示例,它应该把它变成一个伸展背景图像。

  • 它不会让我的网络摄像头连接到所示的css示例。我不明白如何获得CSS所有功能。**

我希望清除我所要求的。

与它通过ID引用元素有关吗?

编辑:END

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

我真的很感激任何意见!

一切顺利,

路易

+0

请您提供的哪些行为会导致你相信这个代码稍微更精确的指示没有按要求运作? – Lighthart

+0

对不起,我还不够清楚,我添加了更多信息。我希望这有助于。 – user199835

回答

0

使用这个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')" 
+0

感谢您的帮助,但它似乎没有生效。也许这是在JavaScript自己的东西。我会试着亲自去问一个人。这将很容易得到确切的问题 – user199835