0

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

另外，我有该background-position: right center属性，并尝试添加-moz-background-sizeand-moz-background-position属性，但没有运气。

这是相关的CSS：

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

编辑：这是网站：crowdsparked.com

4

4 回答 4

1

请尝试使用这种风格：

background-attachment: fixed;
于 2018-01-10T10:57:06.207 回答
1

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

于 2017-03-02T13:43:04.653 回答
0

在你的 CSS 中试试这个：

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

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

包含

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

覆盖

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

于 2013-07-02T16:24:22.083 回答
0 
background-attachment: fixed;

在FF工作

于 2018-10-01T08:58:51.323 回答