背景尺寸：封面在视网膜显示屏上看起来像素化答案

【问题标题】：background-size: cover looks pixelated on retina display背景尺寸：封面在视网膜显示屏上看起来像素化
【发布时间】：2012-07-21 02:58:09
【问题描述】：

可以看到我正在开发的网站here。如果您查看 iPad 3 或 iPhone 4 上的“关于”或“联系方式”部分，背景看起来全是疯狂的像素化。

我将background-size 设置为cover，这样当用户调整它的大小时，它会适当地缩放，但是在iPad 或iPhone 上它看起来很糟糕。

关于如何为设备解决此问题的任何帮助或提示@media only screen and (min-device-pixel-ratio: 2)？

谢谢。

【问题讨论】：

你说的是哪个元素？您能否在此处粘贴适当的 html 和 css 以供我们查看，否则我们不知道您指的是哪个图像。我猜你的意思是标题背景？ ourcityourstory.com/dev/img/header-bg.jpg
关于和联系部分的背景。 Header 部分的背景实际上是一个绝对定位的图像。
我似乎在使用背景尺寸时遇到了同样的问题：我的网站上的封面 (jag.is)。它在所有分辨率的桌面浏览器中都可以正常工作，但在 iPhone Safari 上却是一团糟。（参考介绍部分的背景，标题为“Pixel Perfect Design & Code”）

标签： iphone html css ipad retina-display

【解决方案1】：

这是因为您使用的是 background-attachment:fixed - 无论出于何种原因，在 iOS 上与 background-size: cover 一起使用时都会导致此行为。（我在http://jag.is 遇到了同样的错误，今天刚刚解决）。

所以如果你添加以下内容应该可以解决：

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

-webkit-background-size 属性也适用于 iOS，因为它无法识别 background-size 的 cover 属性

Here's the article我找到了我的解决方案。

可爱的网站设计顺便说一句。

【讨论】：

【解决方案2】：

为 IOS 创建高分辨率图像时，您需要使用高分辨率媒体查询，您似乎已经在这样做了。此外，您的图像应该是两倍大，然后缩小到 50% 以获得高视网膜。

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
            #header { background: url(headerRatio2.png); background-size: 50%; }
        }

这个方法应该可以工作。如果没有，请确保您有适当的元标记，并仔细检查您的代码。

【讨论】：

我已经在做所有这些了。我说的是属性背景大小：封面。它搞砸了，但我需要它来掩盖。