Question

我正在一个网站上工作，我想要一个背景图片来填满整个屏幕，即使它的一部分被切断了。我发现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

Answer 1

我遇到了类似的问题 - 我发现虽然背景大小覆盖了屏幕，但是身体的高度并不是整个屏幕，因此当我从顶部使用下一个50％时，它被定位得很远高于我想要的。当我添加宽度：100％＆amp;高度：固定它的100％（也是边距：0px以防止滚动条）。

Answer 2

请尝试使用此风格：

background-attachment: fixed;

Answer 3

在你的css中试试这个：

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

您无需为这些中的任何一个添加前缀。这是moz规范，它解释得比我以前更好：

<强>内含

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

<强>盖

封面值指定背景图像的大小应尽可能小，同时确保两个尺寸都大于或等于容器的相应尺寸。

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

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

Answer 4

background-attachment: fixed;

在FF中工作的

Firefox上的背景大小封面

4 个答案: