自动调整身体背景图像到浏览器窗口？

i have a jquery script that allows for changing the body background

我有一个jquery脚本,允许更改正文背景

i want to have the background image of the body scaled to the browser window size there is a script called http://www.buildinternet.com/project/supersized/ but i am not able to make use of the scaling from that script because it effects the class img not the background-img

我希望将身体的背景图像缩放到浏览器窗口大小,有一个名为http://www.buildinternet.com/project/supersized/的脚本,但我无法使用该脚本的缩放,因为它影响类img而不是background-img

any ideas

<script type="text/javascript">
$(document).ready(function() { 
$("#BGSelector a").click(function() {
   var imgLink = $("img", this).attr("src");
   $.cookie("html_img", "" + imgLink + "", { path: '', expires: 7 });
   var imgCookieLink = $.cookie("html_img");       
   $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 

}); 
});
</script>

<script type="text/javascript">
$(document).ready(function() {   
       var imgCookieLink = $.cookie("html_img");  
       $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837");

 });

</script>

4 个解决方案

#1

You won't be able to do this cross-browser until the advanced background properties in CSS3 come more into play in the browser universe. The closest way is what Ali has already specified.

在CSS3中的高级背景属性在浏览器Universe中发挥作用之前,您将无法执行此跨浏览器。最接近的方式是阿里已经指定的方式。

If it's only IE you care about then you could try their proprietary AlphaImageLoader CSS filter, e.g.

如果它只是你关心的IE,那么你可以试试他们专有的AlphaImageLoader CSS过滤器,例如

#myDiv { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale'); }

#myDiv {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src ='/ workshop / graphics / earglobe.gif',sizingMethod ='scale'); }

Please note though that this will play havoc when people try to click links with the filter loaded on a background - you won't be able to click the links until you implement some form of workaround (there's a few out there).

请注意,当人们尝试点击带有在后台加载的过滤器的链接时,这将会造成严重破坏 - 在实施某种形式的解决方法之前,您将无法单击链接(这里有一些)。

#2

If I were you I would append the img into the DOM. Then set it to be absolutely positioned and set it's width according to client's width. Make sure everything else has a higher z-index and your img the lowest.

如果我是你,我会将img附加到DOM中。然后将其设置为绝对定位并根据客户端的宽度设置其宽度。确保其他所有内容都具有更高的z-index,并且您的img最低。

#3

There is another route you can go down which slightly goes against the separation of concerns ideology however it is feasible.

还有另一条路线你可以下去,这有点违背了意识形态的分离,但这是可行的。

I know that there is an Images component assembly or alike assemblies exist which you can import into your project if your site is written in .net and almost certain (but don't have personal experience) that these assemblies must exist for any other platform you use for your back end.

我知道存在一个Images组件或类似的程序集,如果您的站点是用.net编写的,您可以将其导入到项目中,并且几乎可以肯定(但没有个人经验)这些程序集必须存在于任何其他平台中用于你的后端。

So you can use of these to recompose the image according to the clients screen size and then either use back end code or js to set this image as a background image for an element. But as jason has mentioned doing this easy peasy would require you to wait for microsoft folks to find a commercial use in adopting the new css3 rules and then the rest of the market can also follow.

因此,您可以根据客户端屏幕大小使用这些来重构图像,然后使用后端代码或js将此图像设置为元素的背景图像。但是,正如杰森提到的那样容易让人们等待微软人员在采用新的css3规则时找到商业用途,然后其他市场也可以遵循。

#4

Have you thought about using the canvas? Ok, I must admit barely know anything about using the canvas (I just started learning it) and my example below is probably done completely wrong, but it works (with FF & Chrome, not IE). It even resizes with the browser.

你有没有想过使用画布?好吧,我必须承认几乎没有任何关于使用画布的知识(我刚刚开始学习它),我的下面的例子可能完全错了,但它有效(使用FF和Chrome,而不是IE)。它甚至可以通过浏览器调整大小。

<canvas id="myCanvas" style="width:100%;height:100%;position:absolute;left:0px;top:0px;;z-index:-1;"></canvas>
<script type="text/javascript">
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='bg.jpg';
img.onload = function () {
 context.drawImage(this,0,0,300,150);
};
</script>

Note the drawImage size must be 300x150 in this example as that is the default canvas size

请注意,此示例中drawImage大小必须为300x150,因为这是默认的画布大小

#1