html采用背景图是否会加快页面渲染,HTML – 背景图像渲染问题

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

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

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

}

}