Question

我只是想简单地尝试获得一个整体填充浏览器窗口的身体背景图像（纵横比无关紧要）。

标准css代码

 body{
     background-image: url('test.jpg');
     background-size: 100% 100%;
 }

似乎在几乎所有现代主流浏览器中运行良好，包括Firefox 45.但在最新的Firefox中，52，背景图像在垂直方向上被剪切到一个非常窄的带，然后重复直到它填满窗口。我是否使用了一些我不知道的弃用代码，或者这是一个Firefox错误？

Answer 1

来自the spec's definition for background-size：

百分比是相对于背景定位区域的。

来自section 3.11.1（强调我的）：

<强> 3.11.1。画布背景和根元素

根元素的背景成为画布的背景，其背景绘画区域扩展到覆盖整个画布。 但是，任何图像的大小和位置都相对于根元素，就像它们仅为该元素绘制一样。（换句话说，背景定位区域是根元素确定的。）根元素不会再次绘制此背景，即其背景的使用值是透明的。

您将背景应用于body，但这没有任何区别;第3.11.2节简单地说“传播的值被视为在根元素上指定它们。”

所以看起来Firefox只是简单地将其行为更新为更符合标准（我不知道是否存在Bugzilla票证;我无法找到它）。标准模式下空HTML文档中根元素的背景定位区域应为零，因为此类文档中根元素的高度应为零，这意味着background-size的百分比值应解析为零。由于某些原因，Firefox 52仍然会在根元素上强制执行8像素的最小高度，导致您使用background-size: 100% 100%看到非常窄的波段，但我想这是一个单独的问题。

所以基本上这意味着为了让background-size: 100%能够在html或body上工作，你需要为根元素指定100％的高度，与我的回答类似到height: 100% or min-height: 100% for html and body elements? min-height之外的body除了，因为您只应用单个背景，而不是单独的body元素，这取决于传播行为在§3.11.2中描述

或者您可以选择将min-height: 100vh应用于body元素，而不是像Michael Coker演示的那样，但是假设您在使用时会删除默认边距。

Answer 2

background-size中的第二个值是高度。在正文上设置height或添加一些内容，它可以正常工作。

body {
  background: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
  background-size: 100% 100%;
  min-height: 100vh;
}

Answer 3

试试这个：

background: url(test.jpg) no-repeat;
background-size: cover;
background-position: 100%;

希望这有效。

为什么没有背景大小：100％100％在Firefox中不再有效？

3 个答案: