HTML – 背景图像渲染问题

概述我在某些手机上遇到了一些背景问题. 该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: 我在某些手机上遇到了一些背景问题.

该div的样式是：

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

它在朋友iPhone 6上渲染得很好,看起来像这样：

当它在我的iPhone 5s上渲染时,背景图像会失真：

任何想法为什么背景图像会以这种方式渲染？是否与设备的像素密度有关？

对不起,大图像.

ufc-info.com

我做了一个快速的小提琴,它正在按需要渲染.

Fiddle

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

您当前的图片bg04.jpg是150×150,您需要找到/创建它的高分辨率版本.

@mediaonly 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;    }}

或者像这样快速尝试,但模式看起来会略有不同.

@mediaonly 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 */    }}

总结

以上是内存溢出为你收集整理的HTML – 背景图像渲染问题全部内容，希望文章能够帮你解决HTML – 背景图像渲染问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。