谷歌浏览器网站logo模糊不清问题的处理

使用谷歌Chrome浏览器访问网站时，会出现Logo模糊问题，这个问题很多朋友都遇到过。本文之前介绍的方法，不能完美的解决这一问题。经过牛奇网的进一步摸索，找到了一个可以完美解决谷歌浏览器Logo模糊问题的方法。

大家先看一下最终效果图：

完美解决谷歌浏览器网站logo模糊

通过上面的效果图可以发现，我们已经完美的解决了谷歌Chrome浏览器访问网站时会出现Logo模糊的问题。解决方案很简单，只要在CSS样式表中，找到Logo对应的Css选择器，然后加入下面这条样式规则，就可以重现清晰的Logo了。

img {
image-rendering: -webkit-optimize-contrast;
}

如效果图所示，在牛奇网的案例中：

body>header.header .logo {
image-rendering: -webkit-optimize-contrast;
}

如果大家在添加了上述规则后，依然无法解决该问题，可以试试下面的方法：

body>header.header .logo {
image-rendering: -webkit-optimize-contrast !important;
}

上面的方法更新于2022年5月18日，如果上面的方法解决了您的问题，请忽略下面所有内容。

最近在查找网站的bug，发现在使用谷歌浏览器访问牛奇网的时候，网站的logo显示不清晰。如上图所示，1处为使用火狐浏览器访问网站时显示的效果，2处为使用谷歌浏览器访问网站时显示的效果，可以看出，2处的显示效果明显logo显示非常的模糊。

我也查看了大量的wordpress网站发现很多都存在网站logo发虚的问题，但是很多网站站长可能并没有发现，或者发现了并没有进行相应的处理。在经过网络的搜索后，我发现其实处理的方法非常简单，只需要对logo进行相应的CSS设定后即可解决谷歌浏览器网站logo显示发虚的问题，下面我将解决方案分享给大家。例如网站的logo的class属性定位方式为：.navbar .logo{}，那么我们将相应的设定放在大括号中即可。

.navbar .logo {    backface-visibility:hidden;}

另外可能其他浏览器也存在相关的问题，那么也可以根据下面的设定进行操作，即可改善logo发虚的问题。

css中给图片添加此属性：

backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */
-ms-backface-visibility:hidden; 	/* Internet Explorer */

我们打开网站主题目录的CSS样式表文件，然后将相关设定复制到CSS文件内保存即可生效。当然，我们也可以通过WordPress网站的后台中外观-自定义-额外CSS增加上述的属性设定。