背景图片渲染问题

Question

我在某些手机上遇到了背景问题。

该div的样式为：

#navPanel {
    background: url('images/bg04.jpg');
    box-shadow: inset -1px 0px 0px 0px rgba(255,255,255,0.25), inset -2px 0px 25px 0px rgba(0,0,0,0.5);
    text-shadow: -1px -1px 1px rgba(0,0,0,1);
}

我的朋友的iPhone 6上呈现良好，看起来像这样：

但是在我的iPhone 5s上呈现时，背景图片变形了：

有什么想法，为什么背景图片会这样呈现？这与设备的像素密度有关吗？

抱歉图片太大了。

ufc-info.com

我做了一个快速的fiddle测试，它呈现正常。

Fiddle

- Ryan Gill

---

这可能与该死的视网膜显示有关。 - CodeGodie

我在移动端的CSS路径上出了问题。抱歉，我已经修复了路径，现在图片显示正常了。 - Ryan Gill

Answer 1

我不明白为什么看起来不同，因为我相信两台设备都有retina显示屏。无论如何，您可以使用媒体查询来针对retina屏幕并提供高分辨率的背景图像。 您当前的图像bg04.jpg大小为150x150，您需要找到/创建一个高分辨率版本。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    #navPanel {
        background-image: url('images/[e-mail]'); /* this image should be 300x300 */
        background-size: 150px 150px;
    }
}

或者像这样快速尝试，但是图案看起来会略有不同。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    #navPanel {
        background-image: url('images/bg04.jpg'); /* current one 150x150 */
        background-size: 75px 75px; /* half */
    }
}

- Stickers