Firefox 上的背景尺寸封面答案

【问题标题】：background-size cover on FirefoxFirefox 上的背景尺寸封面
【发布时间】：2018-10-01 16:58:51
【问题描述】：

我正在开发一个网站，我希望背景图片填满整个屏幕，即使它的一部分被截断。我发现background-size: cover CSS 属性在 Chrome 和 Safari 上效果很好。但是，当我尝试在 Firefox 上打开网页时，整个图像看起来太高了，底部是我选择的 background-color。为什么会这样，我能做些什么来防止这种情况发生？

另外，我有background-position: right center 属性，并尝试添加-moz-background-size 和-moz-background-position 属性，但没有成功。

这里是相关的 CSS：

-moz-background-size: cover;
background-size: cover;
-moz-background-position: right center;
background-position: right center;

编辑：这是网站：crowdsparked.com

【问题讨论】：

你能给我们看看你的代码吗？
MDN background-size
@Burg 请看我的编辑。
您没有 doctype 并且处于 quirks 模式。不知道是不是这个原因。将此添加到您的第一行：<!DOCTYPE html>。无论如何，您都必须拥有它。
@Rob 添加了它，但结果相同。感谢您的尝试。

标签： css firefox background-image

【解决方案1】：

我有一个类似的问题 - 我发现虽然背景尺寸覆盖了屏幕，但身体的高度并不是整个屏幕，所以当我使用从顶部向下的 50% 时，它的位置很远比我想要的高。当我添加 width: 100% & height: 100% 时修复它（还有 margin: 0px 以防止滚动条）。

【讨论】：

【解决方案2】：

请尝试使用这种风格：

background-attachment: fixed;

【讨论】：

【解决方案3】：

在你的 CSS 中试试这个：

background-size: contain;
//or this:
background-size: cover;

您不需要为其中任何一个添加前缀。这是 moz 规范，比我解释得更好：

包含

contain 值指定无论包含框的大小如何，都应缩放背景图片，使每一边尽可能大，同时不超过容器对应边的长度。

封面

cover值指定背景图片的大小应该尽可能的小，同时保证两个维度都大于等于容器对应的大小。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

【讨论】：

如果您仍需要帮助，您将不得不发布更多代码。否则很难确定问题所在。
请查看我在问题上发布的链接。
请在您的问题中发布代码或制作小提琴。 www.jsfiddle.net
构建一个简化的测试用例。只收集重现问题所需的代码，不要发布任何其他内容。如果你这样做，我应该可以直接复制代码并立即看到问题。

【解决方案4】：

background-attachment: fixed;

在 FF 中工作

【讨论】：