iPhone/iPad上不显示背景图片 [英] Background image does not show on iPhone/iPad

问题描述

我们的Magento网站上有一个背景图片，由于内容量的原因，该图片会根据需要进行扩展.它可以在PC和(希望是Mac)上正常工作.但是在任何iOS设备上，都不会显示白色背景.

There is a background image on our Magento web site that expands as needed due to the amount of content. It works fine on PCs and (hopefully Macs). But on any iOS device, the white background is not shown.

我提供了两个屏幕截图-一个在常规PC浏览器中的外观，另一个显示在iPhone上的外观.(有关屏幕截图，请参阅下一篇文章)

I have included two screenshots - one of how it looks in a regular PC browser and one showing how it looks on an iPhone. (see next post for the screenshots)

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

这里是直接链接到未在iOS设备上显示的图像的链接: http://tinyurl.com/bcovmvg

Here is a link directly to the image that is not showing up on iOS devices: http://tinyurl.com/bcovmvg

谢谢！

推荐答案

问题是iOS对其可以加载的图像的最大尺寸有限制.从内存来看，它是3到5百万像素，具体取决于设备.供参考，您的图像为9.78mp(978 x 10000).

The problem is that iOS has a limit on the maximum dimensions of images it can load. From memory, it's 3 to 5 megapixels, depending on the device. For reference, Your image is 9.78mp (978 x 10000).

您的背景图片绝对没有理由要那么大.这是171kb，大约10像素后可以重复.剪掉顶部，它可能高10像素，而您可以使用 background-repeat:repeat-y 达到相同的效果.然后只需将背景顶部应用到另一个元素即可.

Your background image has absolutely no reason to be that big. It's 171kb and it's repeatable after about 10px. Cut out the top and it could be 10px high and you could achieve the same affect using background-repeat: repeat-y instead. Then simply apply the top of the background to another element.

或者，可以使用框阴影和虚线边框将背景图像复制到css中.

Alternatively, that background image could be replicated in css using a box-shadow and a dashed border.

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/

这篇关于iPhone/iPad上不显示背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！