Question

我很好奇Foodily.com如何实现这种背景效果？（无论浏览器如何调整大小，背景都会拉伸并且看起来很好）

Answer 1

http://jsfiddle.net/JL3jL/2/embedded/result/

<强> CSS

img {
  width:100%;
  min-width:1600px;
  z-index:0;
  min-width:100px;
}

html, body {
  height:100%;
  min-width:100px;
}

body {
  margin:0;
  padding:0;
}

<强>标记

<img id="bg" src="http://foodily.com/images/BG_grapes.jpg"/>

基本上发生了什么，他们正在为图像设置一个最小宽度，因此它至少需要达到这个尺寸，但可以超过宽度100％。

可能会让人感到震惊的是，它不是元素的背景图像，而是设置为在所有内容下显示的实际img标记。

Answer 2

这是一张1920 x 1200的图像，因此会影响图像在不同分辨率下的显示效果。之后，CSS告诉img标签的宽度为100％。因此，当您拉伸浏览器时，图像肯定是100％的。它们还设置了最小宽度，以确保图像不会小于1600px宽。

Answer 3

他们在背景上保持<img>非常大，并将其风格化为拉伸到浏览器宽度的100％：

#rotate_bg {
   position: fixed;
   top: 0;
   bottom: 0;
   width: 100%;
   z-index: 0;
}

#rotate_bg img {
   width: 100%;
   z-index: 0;
   min-width: 1600px;
}

<div id="rotate_bg" style="display: block; ">
   <img id="rotate_bg_img" src="/images/BG_spinach.jpg">
</div>

Answer 4

我们在missouriwine.org.

上执行此操作的方式相同

function resize_bg(){
 $("#bg").css("left","0");
 $("#bg-top").css("left","0");
 var doc_width = $(window).width();
 var doc_height = $(window).height();
 var image_width = $("#bg").width();
 var image_height = $("#bg").height();
 var image_ratio = image_width/image_height;      
 var new_width = doc_width;
 var new_height = Math.round(new_width/image_ratio);
 var bottle_width = $("#bottle").width();
 if(new_height<doc_height){
  new_height = doc_height;
  new_width = Math.round(new_height*image_ratio);
  var width_offset = Math.round((new_width-doc_width)/2);
  $("#bg").css("left","-"+width_offset+"px");
  $("#bg-top").css("left","-"+width_offset+"px");      
 }

 if(doc_width>(960+(bottle_width+15))){
  $("#bottle").css({"right":0});
 }else{
  $("#bottle").css({"right":((doc_width-960)-(bottle_width+15))});
 }
 $("#bg-top").width(new_width);
 $("#bg-top").height(new_height);
 $("#bg").width(new_width);
 $("#bg").height(new_height);

 }

Answer 5

嗯。背景不适合我。（铬）。也许你在谈论集中内容？然后使用position：absolute。

Answer 6

这是高分辨率图像（1446x960）。它们不向下缩小，仅向上缩放（如果浏览器尺寸小于图像，则只剪辑它）。如果您将浏览器的大小调整为大于图像，则会开始拉伸图像，然后停止看起来非常清晰。

Answer 7

他们正在做的是假背景图片：

<div id="rotate_bg" style="display: block; "><img id="rotate_bg_img" src="/images/BG_peaches.jpg"></div>

仅适用于某些浏览器，请尝试使用jQuery实现同样的功能：http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

该解决方案适用于更广泛的设计，浏览器等。

Answer 8

要完成背景，他们会使用大型图形文件，这样就可以填满您用来查看网页的大部分屏幕尺寸。图形文件放置在固定位置div中，设置为宽度的100％，并设置为底层（z-index 0）。它是固定图形的固定位置即使你滚动并创造一个很好的效果。

然后其他所有内容都显示在背景图像层之上。如果您的浏览器实际呈现的屏幕尺寸大于图像，则浏览器会拉伸图像以使其适合（同样地，它会限制图像大于img标记列出的尺寸。）

如何实现这种背景图像效果？

8 个答案: