Question

我开发了一个在chrome中运行顺畅的网站。但它在firefox中有问题。它无法加载背景图像。我不明白为什么会这样。请在chrome和firefox中查看

CSS

#background {
  position: fixed;
  z-index: 1;
  background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
}

Answer 1

如果您删除了display: inline-block属性，那么它似乎适用于Chrome＆amp; FF。

background {
    position: fixed;
    z-index: 1;
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    /* display: inline-block; -- remove this */
}

如果删除该属性似乎没有其他区别，那么它是否有理由首先使用它？

另外只是一个注释，我注意到有一个media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all规则使用了仅影响chrome / safari浏览器。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all {
  #background {
    background: url(../img/bg/photo_bg_%402X.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
}

Answer 2

您应将显示设置为“阻止” 它应该与之合作。

css在chrome中加载背景图像但不在firefox中加载

2 个答案: