css - 背景图片的最佳实践

Question

我有一张大背景图片，我正在努力让它发挥作用。我使用 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;
}

Answer 1

如果您的首要任务是让图像到达每个 Angular 落(并且您不介意裁剪图像)，请尝试以下摘自 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')";

}