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

Question

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

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

任何想法

<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>

Answer 1

在advanced background properties in CSS3 在浏览器世界中发挥更大作用之前，您将无法跨浏览器执行此操作。最接近的方式是阿里已经指定的。

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

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

请注意，尽管当人们试图点击带有加载在背景上的过滤器的链接时，这会造成严重破坏 - 在您实施某种形式的解决方法之前，您将无法点击这些链接（有一些解决方法）。

Answer 2

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

Answer 3

你可以走另一条路线，它稍微违背关注点分离的意识形态，但它是可行的。

我知道存在一个图像组件程序集或类似的程序集，如果您的网站是用 .net 编写的，并且几乎可以肯定（但没有个人经验）这些程序集必须存在于任何您用于后端的其他平台。

因此您可以使用这些来根据客户端屏幕大小重新组合图像，然后使用后端代码或 js 将此图像设置为元素的背景图像。但正如 jason 所提到的那样，要做到这一点很容易，您需要等待微软人员在采用新的 css3 规则时找到商业用途，然后其他市场也可以效仿。

Answer 4

您是否考虑过使用画布？好的，我必须承认对使用画布几乎一无所知（我刚开始学习它），我下面的示例可能完全错误，但它可以工作（使用 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>

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