我开发了一个在 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;
}
最佳答案
如果您删除 display: inline-block
属性,它似乎在 Chrome 和 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;
}
}
关于javascript - css 在 chrome 中加载背景图像,但在 firefox 中不加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44820823/