Question

我一直在尝试很多方法在一个运行良好的网站上创建背景图片，但是我还没有找到一个不会引起某种问题的版本。

以下是我要找的内容：

在1920 x 1080时，图像非常完美，符合预期的要求当用户缩小浏览器时，图像保持不变。当用户放大时，图像会按原样放大（与网站一起缩放）当用户使窗口变小时，图像保持居中并向左和向右缩小以保持图像的中心聚焦。当用户缩小并调整浏览器大小时，图像保持居中，左右缩小，图像不会缩小。

这是我尝试过的，以及我发现的问题：

方法1

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在这里演示：http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

问题：向下滚动到页面底部，刷新几次。您会注意到，在您开始滚动之前，图像不会每次都加载。这个问题只发生在Chrome浏览器上（看看这是我们的访问者最常用的浏览器，这是一个问题）另外我发现图像的加载速度不如下面列出的其他方法。

旧浏览器没有后备（或者至少我不知道如何设置它）

方法2：

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

演示：http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

问题：调整浏览器大小后，图像会拉长。

方法3：

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

演示：http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

问题：图像缩小并变得更大并且浏览器调整大小（在其他示例中不会发生这种情况）缩小和调整大小时，图像拉伸不会保持居中。

据我所知，我要求的内容可能无法使用CSS，但我认为如果我们能够提出一个单一的解决方案，可以跨浏览器使图像保持居中并且不会缩小或拉伸，会让很多人受益。

Answer 1

通常我使用第一种方法。

否则我正在使用名为Backstretch的jquery插件。 Link here

让我知道测试后的情况。

完美的CSS背景图像

1 个答案: