Question

我不确定新发布的Firefox 35.0中是否存在错误或我的代码是否存在问题，但是在Web应用程序后面我一直使用以下方法设置高分辨率（缓存）背景用户界面背后的图像。从升级到Firefox 35.0后的今天起，这不再正常工作 - 背景图像仅从顶部向下加载约5-10％的页面，然后下面的背景是一个坚实的＃000000。如果我从没有升级Firefox的计算机加载相同的代码，它可以很好地工作，而在IE中也可以很好地工作。

/* This is the important part */
img.background-image {
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* This just to give some example context */
div#container {
  background-color: transparent;
  margin: 0 auto;
  text-align: left;
  width: 600px;
}

div#canvas {
  height: 300px;
  background-color: #ffffff;
}

<div id="container">
  <img class="background-image" 
       src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" alt="" />
  <div id="canvas">
     Web Application is here
  </div>
</div>

请问你能否告诉我是否有办法实现这一点，以便它能与Firefox和IE，所有最新版本一起正常运行，或者如果我不理睬并希望Firefox发布另一个快速错误修复程序？！谢谢。

注意：此处指定的背景图片只是我在Google图片中找到的一个示例，只是为了解决此问题代码段而不是用于Web应用程序的实际问题。

Answer 1

将CSS应用于html元素并删除img代码。

html{

     background-size:cover;
     background-image:url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg);
}

如果您想知道为什么html而不是body，请检查this article。

body似乎可行，但正如对此答案的评论中所述，html始终保证至少是窗口的高度，这不会导致意外行为

希望这会对你有所帮助。

Answer 2

使用大图时，我遇到过与FireFox 35.0类似的问题。

将头发拉出两天后，FireFox 36.0测试版中出现了此问题。

https://bugzilla.mozilla.org/show_bug.cgi?id=1122845

显示问题的一个非常简单的测试用例如下：

var img = new Image();
img.style.position = 'fixed';               
document.body.appendChild(img);                    
img.src = "path/to/a/large/image.jpg";

这只是问题表现出来的一种方式。

只会显示图像的一小部分。图像甚至不需要很大，例如200kb会导致问题。

注意：如果您使用服务器上的现有映像进行测试，请先清除FireFox 35.0缓存。

Answer 3

将背景放在body标签上，如下所示

body {
background-image(url) ; 
}

HTML全屏背景图片

3 个答案: