在 iPhone 上呈现不同的 CSS 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3884444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image rendering differently on iPhone
提问by codeulike
We have a page design that works great in every PC browser that I have tried, but goes strange when viewed with an iPhone or iPod Touch.
我们有一个页面设计，在我尝试过的每个 PC 浏览器中都运行良好，但在使用 iPhone 或 iPod Touch 浏览时会变得很奇怪。
The problem is something to do with a centred background image thats very tall:
问题与非常高的居中背景图像有关：
#content_container
{
background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}
The content-background.jpgimage is very tall (3000 pixels) and is designed to be 'revealed' as the DIV it is in grows due to content.
该content-background.jpg图像非常高（3000 像素），旨在“显示”，因为它所在的 DIV 由于内容而增长。
You'll have to look at the page and full CSS to understand, so I've stripped everything else out of the design and re-produced the problem with this example:
您必须查看页面和完整的 CSS 才能理解，因此我已经从设计中剥离了所有其他内容，并使用此示例重新生成了问题：
http://files.codeulike.com/static/cssexample/example.htm
(example made up of 1 html file, 1 css file and 3 images)
http://files.codeulike.com/static/cssexample/example.htm
（示例由 1 个 html 文件、1 个 css 文件和 3 个图像组成）
You'll see that in IE8, Firefox, Chrome you'll get a nice green box. But in an iOS browser the long thin background image gets re-scaled and everything goes odd.
你会看到在 IE8、Firefox、Chrome 中你会得到一个漂亮的绿色框。但是在 iOS 浏览器中，细长的背景图像被重新缩放，一切都变得奇怪。
(I'm using an iPod Touch 2nd gen but I assume the same problem will happen in other iPhones/iPod touches).
（我使用的是第 2 代 iPod Touch，但我认为其他 iPhone/iPod touch 也会出现同样的问题）。
Any help greatly appreciated!
非常感谢任何帮助！
回答by codeulike
Figured it out: The iPhone has a megapixel limit for Jpegs, after which it shrinks the Jpeg.
想通了：iPhone 对 Jpeg 有百万像素限制，之后它会缩小 Jpeg。
There's a very good blog post about this on defusion.org.uk: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
在 defusion.org.uk 上有一篇关于此的非常好的博客文章：http: //www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari /
The limit after which Jpegs get shrunk seems to be around 2 megapixels. Its a documented iOS resource limit and is described here:
Jpeg 缩小后的限制似乎约为 2 兆像素。它记录了 iOS 资源限制，并在此处进行了描述：
Apple - Creating Compatible Web Content - Know iOS Resource Limits
Apple - 创建兼容的 Web 内容 - 了解 iOS 资源限制
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
JPEG 的最大解码图像大小为使用二次采样的 32 兆像素。
由于二次采样，JPEG 图像最高可达 32 兆像素，这允许 JPEG 图像解码为像素数的十六分之一的大小。大于 2 兆像素的 JPEG 图像被二次采样，即解码为缩小的尺寸。JPEG 二次采样允许用户查看来自最新数码相机的图像。
.. which I take to mean that Jpegs under 2 megapixels are displayed normally, Jpegs between 2 and 32 megapixels are displayed by subsampling (shrinking), and Jpegs over 32 megapixels presumably can't be displayed at all.
..我的意思是2兆像素以下的Jpeg正常显示，2到32兆像素之间的Jpeg通过二次采样（缩小）显示，超过32兆像素的Jpeg可能根本无法显示。
Changing my site to use a background image that was under 2 megapixels solved the problem.
更改我的网站以使用低于 2 兆像素的背景图像解决了这个问题。
回答by jonas
Not quite true, I have a background 1640x1200 (sub 2Mpix) and the background shrinks here... :S
不太正确，我有一个 1640x1200（低于 2Mpix）的背景，背景在这里缩小了......：S
回答by Mark
I used Safaris CSS3 multiple background images to get around this, just made 4 images 500px tall and positioned them on top of each other
我使用 Safaris CSS3 多个背景图像来解决这个问题，只制作了 4 个 500 像素高的图像并将它们放在彼此的顶部
回答by wordman
I realize this post is two years old as I write this, but I tried something that worked, perhaps not the best way to go but it solved my problem.
我意识到这篇文章在我写这篇文章时已经两年了，但我尝试了一些有效的方法，也许不是最好的方法，但它解决了我的问题。
First step was to save my background image as a .png which cured the problem completely...except being a 1200px x 12000px background image, the .png file was a monster.
第一步是将我的背景图片另存为 .png 格式，这完全解决了问题……除了 1200px x 12000px 背景图片外，.png 文件是个怪物。
So, I opened the .png file in Photoshop and saved it optimized for web and devices as a .jpg and uploaded that file and it worked like a charm on the iPhone and all of the big 5 browsers.
所以，我在 Photoshop 中打开了 .png 文件，并将它针对网络和设备进行了优化保存为 .jpg 并上传了该文件，它在 iPhone 和所有 5 大浏览器上运行起来就像一个魅力。
Hope that helps!
希望有帮助！
回答by Varun Jain
If you have kept
如果你一直保持
background-attachment: fixed;
in desktop CSS file, then remember it to change it to
在桌面 CSS 文件中，然后记住将其更改为
background-attachment: scroll;
in mobile CSS file. If this is not done that it will show unexpected effect.
在移动 CSS 文件中。如果不这样做，它将显示出意想不到的效果。
