视差图像模糊/ V。在iPhone上pixelled。需要CSS提示

问题描述：

背景图像看起来真的像素化在iphone屏幕上。

这是我使用

<div class="parallax img-overlay3" style="background-image:url(img/pictures/food02.jpg)" data-stellar-background-ratio="0.2">

当我看到使用类似http://mobiletest.me/iphone_5_emulator它看起来很完美，但实际上看在iPhone上的HTML的图像似乎被放大到我把任何图像的一小部分在那里。已经搜索了几个小时，似乎是一个没有明确答案的问题。

您记住，您需要iPhone上的这些超高分辨率图像吗？我的意思是iPhone带有视网膜，这意味着你不仅有72ppi但超过300ppi。你的图像需要符合该分辨率。 – 2014-09-20 21:25:39

我问的更多的是为什么它在模拟器中起作用，但在实际的电话上它并没有。我是否需要在服务器上放置两种不同类型的照片，以便根据访问它的设备查看任一照片？这似乎击败了一个敏感的网站。我已经看到这个问题在其他响应式网站上不存在......只是这一个。 :( – 2014-10-02 13:58:21

响应并不意味着你不需要付出努力来创建图像。例如，BBC有一个过程，可为不同尺寸的网站创建9个不同的图像，并且这些图像根据分辨率/ dpi进行加载。 – 2014-10-02 15:00:30

答

您需要注意的是，有些设备能够以高于72ppi的分辨率显示图像。例如，新的iPhone 6 plus有401ppi。您需要为这些设备提供额外的图像。为此，请使用Device-pixel-ratio：2的媒体查询。这就够了。也有JavaScript解决方案，但我认为你可以使用谷歌来找到它们。

在这看看更多的CSS代码片段： http://stephen.io/mediaqueries/

答

我有此相同问题（figure8recording.com）

，但我不认为它必然相关到视网膜的图像，当我移除固定的背景附件时，我在视网膜设备上获得正确的图像。

我认为任何带有'background-position：fixed'的图像都会将图像放大到整个文档体的大小，当我设置移动设备上的'背景位置：滚动'图像看起来不错，并且位置正确。