拉伸圖像作爲背景

我需要圖像作爲頁面背景進行拉伸。如果頁面不能很好地縮放，屏幕分辨率可能會有所不同，整個圖像必須在屏幕上可見。我在Google上找到了一些解決方案，但它在Firefox2或IE6或兩者中都不起作用，我也需要這兩種解決方案。我討厭人們不升級他們的軟件，但我仍然看到這些瀏覽器在谷歌分析數據擊中網頁，尤其是IE6。拉伸圖像作爲背景

是否有良好的跨瀏覽器解決方案呢？

來源

2009-07-11 Timmy

它不是CSS1或CSS2可能的，但是有可能在CSS3：requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

然而，這不適用於IE6。

另一種方法是使用背景重複，或者這個網站有一些可能工作（我還沒有檢查，如果它的工作原理）：webdesign.about.com/od/css3/f/blfaqbgsize.htm

我知道你的用戶沒有升級瀏覽器的意思，但是你什麼時候停止爲IE5甚至IE4編碼？

祝你好運，

馬特

來源

2009-07-11 01:16:55 Lima

一個很好的選擇是使用淡出，以圖案或純色「靜態圖像」。這樣你仍然可以獲得你的背景圖片（無論你想要的大）還是可伸縮性。

在CSS3中，您可以使用background-size：100％;

Firefox 3.5支持一些CSS3屬性，但我不相信他們支持一切，但...（我認爲）。

來源

2009-07-11 01:24:15

你可以使用一個很好的老式img標籤，沒有高度和寬度屬性。在你的CSS中，絕對使用低z-索引，將高度和寬度設置爲「100％」。

把一切都在網頁上的其他人在具有較高的z-index

另一個這樣的div：

<style type="text/css"> 
#stretchy { 
    postion: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 0; 
} 
#everything_else { 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 
</style> 

... 

<img src="/images/myimage.jpg" id="stretchy" /> 

<div id="everything_else"> 
    ... 
</div>

爲例見http://axoplasm.com/lost.html。

這不完全是一個「背景圖像」（可能不符合W3C標準的CSS），但它的工作原理。

來源

2009-07-11 04:17:55 axoplasm

+1 for id =「stretchy」 – cjk 2009-12-08 12:17:17

我不想劫持這個問題，但如果你有這樣的代碼：

background-image: url('images/background.gif'); 
background-size: 100%;

此重複所有主流瀏覽器（IE，FF，GC，SF，OP），它同時令人討厭的圖像適用於所有瀏覽器，不像z-index深度方法（我有一個複雜的前景）。

但是，如果瀏覽器突然獲得bg尺寸的CSS3支持，CSS3規範是否會說明會發生什麼？它應該拉伸形象還是做它始終做的和重複的事情？

來源

2009-12-08 12:14:54

拉伸圖像作爲背景

回答

相關問題