1

我有一个 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>
4

4 回答 4

1

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

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

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

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

于 2009-07-06T12:41:12.310 回答
0

你有没有想过使用画布？好的，我必须承认对使用画布几乎一无所知（我刚开始学习它），我下面的示例可能完全错误，但它可以工作（使用 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，因为这是默认画布大小

于 2009-08-16T00:36:56.720 回答
0

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

于 2009-07-05T21:33:30.080 回答
0

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

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

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

于 2009-07-06T17:43:17.880 回答