Question

背景图片在firefox上无法正确显示，但在其他浏览器上运行正常。请参阅the link here

body {
  background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Answer 1

background-size正常运作，

但您的内容位于position:absolute;，因此它不会向正文提供height，因此实际上不会background。

如果所有其他浏览器都使用html来绘制背景并移动背景大小，那么firefox会将背景大小附加到正文的实际大小上，这更像是我认为的错误。

https://www.w3.org/TR/CSS2/colors.html（关于背景和颜色......）

您可以添加：

html {
    height:100%;
}
body {
    min-height:100%;
}

或使用html代替背景。

Answer 2

此属性有效：

SELECT
    [name]
FROM
    sys.syslogins
WHERE
    [sysadmin] = 1
    OR [serveradmin] = 1

Answer 3

而不是background-size: 100% 100%;，您应该使用cover。这样可以确保无论大小如何，图像都将覆盖整页（匹配高度或宽度取决于哪个更大）。像这样：

body {
  background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

写出相同内容的更好方法是：

body {
  background: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg') center center / cover no-repeat;
}

编辑：真正的答案是@GCyrillus答案和这一个的结合。将height: 100%或height: 100vh添加到正文以获得全高图像。然后更新background-size: cover以在保持比率的同时正确拉伸图像。

firefox

3 个答案: