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将此图像设置为元素的背景图像。但是，正如杰森提到过这样做容易让人们等待微软人员在采用新的css3规则时找到商业用途，然后其他市场也可以跟随。

Answer 4

您是否考虑过使用画布？好吧，我必须承认几乎没有任何关于使用画布的知识（我刚刚开始学习它），我的下面的例子可能完全错了，但它有效（使用FF＆amp; 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，因为这是默认的画布大小

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

4 个答案: