如何才能完成這種背景圖像效果？

我很好奇Foodily.com是如何完成這種背景效果的？（背景被拉伸，看起來很好無論瀏覽器的大小調整）如何才能完成這種背景圖像效果？

2011-02-23 john

這裏也沒有拉伸 - 這是一張大照片，而較小的分辨率只顯示一張照片。也許有人用一個巨大的屏幕可以幫助:) – Konerak 2011-02-23 18:52:30

@Konerak：http://i.imgur.com/mu0Qg.jpg :) – thirtydot 2011-02-23 19:00:01

用同樣的方法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標籤設置爲顯示在所有東西下。

來源

2011-02-23 18:55:17 Loktar

任何跨瀏覽器的問題？ – john 2011-02-23 19:20:54

我知道IE8下面並不完全支持最小寬度。 – Loktar 2011-02-23 19:23:25

嗯。背景不適合我。（鉻）。也許你在談論關注內容？然後使用position：absolute。

來源

2011-02-23 18:50:46 user194076

這是一個高分辨率圖像（1446x960）。它們不會縮小，只能縮小（如果瀏覽器尺寸小於圖像，則只是剪輯它）。如果您調整瀏覽器的大小以使其大於圖像，則會開始拉伸圖像，然後停止看起來非常清晰。

來源

2011-02-23 18:52:56

這是一張1920 x 1200的圖像，因此會影響圖像在不同分辨率下的顯示效果。之後，CSS將img標籤的寬度指示爲100％。所以，當你拉伸瀏覽器時，圖像肯定是100％。他們也有一個最小寬度設置，以確保圖像不小於1600px寬。

來源

2011-02-23 18:53:06 RussellUresti

他們保持一個<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>

來源

2011-02-23 18:53:27 Humberto

我們正在做它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); 

}

來源

2011-02-23 18:53:49 ablemike

他們正在做什麼是假的背景圖片：

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

這解決方案將與更廣泛的合作設計陣列，瀏覽器等

來源

2011-02-23 18:55:51 Walker

要完成背景，他們正在使用大型圖形文件，這樣它會填滿您用來查看頁面的大多數屏幕大小。圖形文件被放置在一個固定位置div內，設置爲寬度的100％，並設置爲底層（z-index 0.）。即使您滾動並創建一個圖形效果不錯。

然後，其他所有內容都顯示在背景圖層上。如果您的瀏覽器實際渲染的屏幕尺寸大於圖像，則瀏覽器會拉伸圖像以適應圖像（以同樣的方式，它將限制比img標記所列尺寸大的圖像。）

來源

2011-02-23 18:59:30 AdamJonR

如何才能完成這種背景圖像效果？

回答

相關問題