背景圖片的最佳做法

我有一個大的背景圖片，我正在努力工作。我有它定位使用CSS，它似乎很好，除了IE瀏覽器。由於某些原因，在IE的所有版本中，我測試過它會在底部留下大的白色空白。背景圖片的最佳做法

我想知道是否有一個我沒有意識到的最佳實踐。

在此先感謝您的幫助。

圖像是2500px X 1500px

body 
{ 
margin:0px; 
background-image: url(../img/main_bg_2.jpg); 
background-repeat:no-repeat; 
background-position:center; 
}

我已經試過這種方式，其工作過，但像罷了大約700像素比下降，其餘是白色的所有瀏覽器。

body 
{ 
margin:0px; 
background-image: url(../img/main_bg_2.jpg); 
background-size:100%,100%; 
background-repeat:no-repeat; 
}

來源

2014-01-31 Nick L

什麼版本的IE瀏覽器您使用的 – Deryck

你試過

html {height:100%}

我認爲這是與IE瀏覽器的問題......這個主體可以是100％，但高度不是默認100％...所以你可以覆蓋它。

試試吧。

來源

2014-01-31 00:30:50

以下是開發人員常用的重置方法。

* { 
    margin: 0; 
    }

如果它是一個特定的IE版本，你可以使用它。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

來源

2014-01-31 00:32:23 Cam

使用的背景圖像的最佳實踐取決於：

a）如果你需要展示一個唯一的顏色或降低圖像，最好的做法是創建一個小圖像，重複圖像在頁面中。

b）如果您需要顯示大圖像，則需要降低圖像的質量。（JPEG格式小於PNG）

c）有時您可以使用固定的圖像。例如：

http://www.w3schools.com/cssref/pr_background-position.asp

問候。

來源

2014-01-31 00:34:36 codesandtags

太感謝很多爲您的答覆。我會更仔細地審查。 –

如果你的首要任務是對圖像打每一個角落（你不介意裁剪圖像），請嘗試以下，從Chris Coyier's CSS Tricks site採取：

html { 
    background: url(../img/main_bg_2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    /* IE */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main_bg_2.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main_bg_2.jpg', sizingMethod='scale')"; 

}

來源

2014-01-31 00:34:53

非常感謝，這種方法似乎效果最好。 –

背景圖片的最佳做法

回答

相關問題