CSS背景图像不在手机上显示

Question

我已经在Wordpress网站上的几个页面的横幅部分使用CSS添加了背景图片，并且他们使用自动前缀在Chrome / Safari / IE / Firefox上的桌面上正常工作 。由于某些原因，移动浏览器（我已经在我的iPhone上的Chrome和Safari上测试过），一些的横幅图片显示正确，而其他则没有。< / p>

.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}

左侧的图像是正确显示背景图像的页面，右侧的图像是不显示背景图像的页面。除了使用的图像之外，两者都具有完全相同的CSS：

更新 根据这些人的一些建议，我试图调整一些图片，看看他们是否在手机上的Chrome / Safari上工作：

正如您所看到的，已调整大小的图片在我的iPhone上同时适用于Chrome和Safari。 Apple的IOS文档建议最大大小为1024px但1400px对我来说没问题（尽管我必须在手机的Safari设置中删除cookie和数据）

Answer 1

那么，这两个图像之间还有哪些其他差异？主要与像素大小有关。

Mobile Safari有一个像素阈值，实际上与图像的kb大小无关，但与像素数量无关。没有显示图像的大小是多少？它们比那些更长还是更高？

Here是Safari Web内容指南的链接。向下滚动到已知的iOS资源限制，看看你是否属于这些类别中的任何一个！

Answer 2

这个 2014 年的问题显然在 2021 年仍然相关。我只是遇到了一个问题，即当它在其他所有设备上都可以正常加载时，整页背景图像没有加载到 OnePlus 5 上。根据以上来自 SlightlyClever 的评论，将图像调整为 1400 像素宽度，使该变体成为移动版本上显示的变体，并且加载良好。同时将下载量从约 3MB 减少到略低于 1MB，这样也不错。