Question

我有一个大的背景图片，我正在努力工作。我把它定位为使用CSS，除了IE之外，它似乎很好。出于某种原因，在我测试的所有版本中，它在底部留下了一个大的白色间隙。

我想知道是否有一种我不了解的最佳做法。

提前感谢您的任何帮助。

图像为2500px X 1500px

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

}

Answer 2

你试过吗

html {height:100%}

我认为这是IE的问题...身体可以是100％但默认高度不是100％...所以你可以覆盖它。

试试吧。

Answer 3

这是一个常见的重置开发人员使用。

*  {
   margin: 0;
  }

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

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

Answer 4

使用带有图像的背景的最佳做法取决于：

a）如果您需要显示唯一的颜色或降低图像质量，最佳做法是创建一个小图像并在页面中重复该图像。

b）如果需要显示大图像，则需要降低图像质量。（JPEG格式小于PNG）

c）有时您可以使用修复图像。例如：

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

问候。

背景图像的最佳实践

4 个答案: