背景图像的最佳实践

Question

我有一个大的背景图像，我正在尝试使其工作。我使用 CSS 定位它，除了 IE 之外，它在其他地方看起来都很好。由于某种原因，我在所有版本的 IE 中进行了测试，它在底部留下了一个大的白色间隙。

我想知道是否有我不知道的最佳实践。

预先感谢您的任何帮助。

图像尺寸为 2500 像素 X 1500 像素

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

我已经尝试过这种方法，它也有效，但图像填充大约 700px 比其余部分在所有浏览器上都是白色的。

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

Answer 1

如果您的首要任务是让图像覆盖每个角落（并且您不介意裁剪图像），请尝试以下操作（取自Chris Coyier 的 CSS Tricks 网站）：

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')";

}