在IE中伸展背景圖片

我有背景圖片。我正在擴展它，以便它適合整個頁面。但它在IE以外的瀏覽器中工作。但如果我使用background-size，它在IE9中工作。但我希望它能在IE8中工作。這個怎麼做？提前致謝。在IE中伸展背景圖片

在其他瀏覽器和在IE9： enter image description here

在IE8： enter image description here

您可以在頁面底部的差異。這裏是我的代碼：

body, html{ 
    height:100%; 
    padding:0; 
    margin:0; 
} 

body.BodyBackground { 

    margin: 0px; 
    background: url(../images/common/header/Background_color.png); 
    background-repeat:repeat-x; 
    background-attachment:fixed; 
    background-position:top center; 
    height: 100%; 
    width: 100%; 
    border: 0; 
    background-size:contain; 
    display:inline-block; 
    background-color: transparent; 


} 

div.content{  
    height:100%; 
    width:97%; 
    background-color: rgb(255, 255, 255); 
    margin: 0px 25px 25px 25px; 
    height:470px; 
    background-position:center; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 

}

來源

2013-05-10 mukund

'background：url（../ images/common/header/Background_color.png）#yourColorFromBottomOfImage;' – Morpheus 2013-05-10 09:19:37

我沒有得到你。你能不能更清楚些？ – mukund 2013-05-10 09:22:12

只需在photoshop（或任何其他軟件）中打開背景圖像並抓住圖像的底部顏色即可。然後用你抓的顏色替換我的'＃yourColorFromBottomOfImage'。 – Morpheus 2013-05-10 09:23:55

IE8不支持background-size財產。

您有以下選擇：

使用的背景圖形不需要拉伸。
有不同的背景圖片（或者根本沒有背景圖片）
[編輯]請參閱有關如何與沒有瀏覽器的黑客來實現這個純CSS更多信息my blog post on the subject提供IE8。
忽略問題並讓IE8用戶看到一個稍微破碎的網站。
使用像CSS3Pie這樣的填充腳本將background-size功能添加到IE8。

如果你真的想用background-size，你真的需要支持IE8，那麼最後的這些選項可能是你最好的一個。

來源

2013-05-10 09:57:01 Spudley

如何使用css3pie – mukund 2013-05-10 10:00:20

從http://css3pie.com/下載並按照網站上的說明操作。 – Spudley 2013-05-10 10:01:17

注意：您需要使用css3pie v2作爲背景大小的功能。 – Spudley 2013-05-10 10:01:43

CSS3將實現一個background-size屬性。但它不支持在IE < 9.

如果你想縮放一個背景漸變，你可以使用img元素，因爲它是縮放。現在不使用背景來顯示PNG，而是使用img元素，並將寬度和高度設置爲100％。

我認爲這是你想要什麼：

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

#page { 
    position: relative; 
    min-height: 100%; 
} 

#page img { 
    background-color: transparent; 
    height: 100%; 
    left: 0px; 
    position: absolute; 
    top: 0px; 
    width: 100%; 
}

的標記：

<body> 
    <div id="page"> 
     <img src="../images/common/header/Background_color.png" alt="" /> 
    </div> 
</body>

來源

2013-05-10 11:06:21 Salomonder

如果我這樣做，我會得到兩個部分。一個只顯示背景，另一個只顯示內容。 – mukund 2013-06-03 08:18:40

雖然像其他的答案狀態background-size不支持是事實。還有其他方法可以實現。

您可以使用以下方式在舊IE中實現拉伸背景。對於sizingMethod

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

其他尺寸選項：

作物剪輯圖像以適合該對象的尺寸。
圖片默認。放大或縮小對象的邊框以適合圖像的尺寸。
比例尺拉伸或縮小圖像以填充對象的邊界。

它，你不要在html或body標籤使用，這是非常重要的。相反，創建一個具有100％寬度和高度的fixed位置div。

來源

2013-06-03 09:55:50 Blowsie

在IE中伸展背景圖片

回答

相關問題