html - 背景图像渲染问题

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);
}

它在 friend 的 iPhone 6 上渲染良好，如下所示:

当它在我的 iPhone 5s 上呈现时，背景图像失真了:

知道为什么背景图像会以这种方式呈现吗？与设备的像素密度有关吗？

对不起，图片太大了。

ufc-info.com

我做了一个快速的 fiddle ，它正在按需要渲染。

Fiddle

Answer 1

我不明白为什么它看起来不同，因为我相信这两种设备都有视网膜显示屏。无论如何，您可以使用媒体查询来定位视网膜屏幕并提供高分辨率背景图像。

您当前的图像 bg04.jpg 是 150x150，您需要找到/创建它的高分辨率版本。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    #navPanel {
        background-image: url('images/bg04@2x.jpg'); /* 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 */
    }
}