[英]background image rendering issue
我在某些手机的背景上遇到一些问题。
该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上渲染时,背景图像失真:
为什么背景图片会以这种方式呈现? 它与设备的像素密度有关吗?
对不起,大图。
我做了一个快速的小提琴,它可以根据需要渲染。
我不明白为什么它看起来会有所不同,因为我相信这两种设备都具有视网膜显示屏。 无论如何,您可以使用媒体查询来定位视网膜屏幕并提供高分辨率的背景图像。
您当前的图片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 */
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.