html - iPhone/iPad 上不显示背景图像

Question

我们的 Magento 网站上有一张背景图片，可根据内容量的需要进行扩展。它在 PC 和(希望是 Mac)上运行良好。但在任何 iOS 设备上，都不会显示白色背景。

我附上了两张屏幕截图 - 一张是它在普通 PC 浏览器中的样子，另一张是它在 iPhone 上的样子。 (截图见下一篇)

这是我们的网站:http://tinyurl.com/arfpf7g

以下是未在 iOS 设备上显示的图片的直接链接:http://tinyurl.com/bcovmvg

谢谢!!

Answer 1

问题是 iOS 对其可以加载的图像的最大尺寸有限制。从内存来看，它是 3 到 5 兆像素，具体取决于设备。作为引用，您的图片为 9.78mp (978 x 10000)。

您的背景图片绝对没有理由那么大。它是 171kb 并且在大约 10px 之后是可重复的。切掉顶部，它可能有 10 像素高，您可以使用 background-repeat: repeat-y 来实现相同的效果。然后简单地将背景的顶部应用到另一个元素。

或者，可以使用框阴影和虚线边框在 css 中复制该背景图像。

CSS:

.outer {
  margin: 20px;
  width: 200px;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.inner {
  height: 200px;
  border: 1px dashed #bde432;
}

HTML:

<div class="outer">
  <div class="inner"></div>
</div>

演示:http://jsfiddle.net/WUpEF/