CSS背景图像未在移动设备上显示答案

【问题标题】：CSS Background Image not displaying on mobileCSS背景图像未在移动设备上显示
【发布时间】：2014-06-28 11:41:51
【问题描述】：

我已经在 Wordpress 网站的几个页面的横幅部分添加了使用 CSS 的背景图片，并且它们在 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 上都有效。 Apple 的 IOS 文档建议最大尺寸为 1024px，但 1400px 对我来说效果很好（尽管我确实必须在手机上的 Safari 设置中删除 cookie 和数据）

【问题讨论】：

可能第二个链接坏了。向我们展示您的代码。
我认为移动版Safari显示的图片大小有限制，尽量使用小图片（
大家好，刚刚更新了工单 - 图像在桌面上的 Chrome、Safari 和 IE 上显示正常，但在移动设备上显示不正常。奇怪的是，有些图像可以正常工作，而有些则不能，所以我有点困惑。
这些图像有什么区别？ px、kb 大小或格式（jpg/png）是否存在差异？
如果图像太大，它会模糊，它不会消失。一定要在设置背景图片后设置background-size，同样，使用供应商前缀，所以-webkit-background-size，-moz-background-size。

标签： html css wordpress background

【解决方案1】：

那么，这两张图片之间还有哪些其他区别？主要与像素大小有关。

Mobile Safari 有一个像素阈值，这实际上与图像的大小（以 kb 为单位）无关，而是与像素的数量有关。不显示的图像尺寸是多少？它们比那些长或高吗？

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

【讨论】：

我在显示大地图时遇到了这个问题，但是如果图像太大，图像会变得模糊。
你确定吗？图像应该模糊的唯一原因是它确实满足大小要求，但设备没有内存来完全渲染它。附带说明一下，是的，画布限制比 JPEG 小得多（BOO！）
好吧，伙计们，我刚刚做了一些测试并将图像的大小调整到 1400 像素宽度就可以了。见上文
@Cody 我确信地图图像在 iPhone 4 和三星 S3 上是模糊的，但在更简单的设备上，比如第一台索尼 Xperia 上没有。不得不将地图分割成更小的部分。

【解决方案2】：

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

【讨论】：