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，大约10像素后可以重复。 剪掉顶部，它的高度可能是10px，使用background-repeat: repeat-y可以达到相同的效果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/