移动端无法显示CSS背景图片

Question

我在WordPress网站的一些页面的横幅部分使用CSS添加了背景图像，并且使用auto-prefixer在Chrome / Safari / IE / Firefox的桌面版本上运行良好。但在移动浏览器上（我在iPhone上测试了Chrome和Safari），一些横幅图像正确显示，而另一些则不正确。

.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上都可以正常工作。苹果的iOS文档建议最大尺寸为1024px，但对我来说1400px也可以（尽管我必须在Safari设置中删除cookies和数据）。

- SlightlyClever

---

也许第二个链接已经失效了，请展示你的代码。 - Itay Gal

我认为移动版Safari显示图像的大小是有限制的，尝试使用小于1024像素的图像。 - Bastian Seeleib

嘿，大家好，刚刚更新了工单 - 在桌面端上，Chrome、Safari和IE上的图片显示正常，但在移动设备上却不行。奇怪的是，有些图片可以正常显示，而另一些则不能，所以我有点困惑。 - SlightlyClever

这些图片有什么区别？在像素、KB大小或格式（JPG/PNG）方面有差异吗？ - Bastian Seeleib

如果图像太大，则会变模糊，而不是消失。设置背景图像后一定要设置background-size，并使用供应商前缀，如-webkit-background-size、-moz-background-size。 - skobaljic

调整图像大小到最大宽度为1400px，效果很好。 - SlightlyClever

Answer 1

那么，这两个图像之间还有哪些区别？主要与像素大小有关。移动版Safari具有像素阈值，实际上与图像的kb大小无关，而是与像素数量有关。那些未显示的图像的尺寸是多少？它们比已显示的图像更长或更高吗？ 这里是Safari Web Content Guide的链接。向下滚动到已知的iOS资源限制，看看您是否符合其中任何一个类别！

- Cody Reichert

---

我遇到了显示大地图的问题，但如果图片太大，它会变得模糊。 - skobaljic

你确定吗？图像模糊的唯一原因是它符合尺寸要求，但设备没有足够的内存来完全渲染它。另外，是的，画布限制比JPEG小得多（BOO！） - Cody Reichert

好的，各位，我刚刚进行了一些测试，将图像缩小到1400像素宽度就解决了问题。请参见上文。 - SlightlyClever

@Cody 我确定在iPhone 4和三星S3上地图图像都是模糊的，但在第一代Sony Xperia等简单设备上不会。必须将地图分成较小的部分。 - skobaljic

Answer 2

这个2014年的问题显然在2021年仍然很重要。我刚遇到一个问题，当其他设备正常加载时，OnePlus 5上的全屏背景图片无法加载。根据来自SlightlyClever的评论将图像调整为1400px宽度，将其作为移动版本中显示的变体，然后它可以正常加载。同时将下载量从约3MB减少到略低于1MB，这也很不错。

- Janne Enberg