关于pc版chrome在retina屏幕下的背景图片bug

最新推荐文章于 2021-03-11 19:17:24 发布

lihongxun945

最新推荐文章于 2021-03-11 19:17:24 发布

阅读量1.7k

点赞数

分类专栏： css

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在retina屏幕上使用Chrome浏览器时遇到的background-size属性解析错误，包括两种常见场景及解决方案。场景一：将background-size属性置于background-image之前会使其失效；场景二：background-size的选择器优先级低于background-image。解决方案为将background-size属性移至后面或在每个background-image后跟上background-size，并考虑使用important关键字提高优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天上线的一个项目，碰到了一个新鲜出炉的bug：

在retina屏幕下的chrome浏览器对background-size解析有bug。

发现一个英文的博客已经提到了这个问题，就翻译了一下，原文地址是：http://chriswharton.me/2012/08/google-chrome-for-macbook-pro-retina-bug/

具体来说在以下两种情况下background-size:属性都会失效：

1, background-size写在了background-image前面：

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.element {
background-size: 20px 20px;
background-image: url(../img/img-2x.png);
}
}

解决方法是把background-size放到后面就行了

2，background-size选择器的优先级比background-image优先级低：

.element.first {
background-image: url(../img/img-2x.png);
} 
.element.second {
background-image: url(../img/img-2x.png);
} 
.element {
background-size: 20px 20px
}

解决方法是在每一个background-image后面都跟上background-size

.element.first {
background-image: url(../img/img-2x.png);
background-size: 20px 20px
} 
.element.second {
background-image: url(../img/img-2x.png);
background-size: 20px 20px
}

或者是给background-size加上important提高优先级。