Chrome 图片缩小的状态下模糊解决办法

知更鸟 2021年2月1日08:34:161 6351

本人很少用Chrome,大部分情况下火狐是主力浏览器,随着新Microsoft Edge推出,两款浏览器也交替使用起来,感觉新Microsoft Edge确实比火狐能快些,不过发现在Microsoft Edge中缩小后的缩略图明显比火狐模糊。文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

Chrome 图片缩小的状态下模糊解决办法

Chrome 图片缩小的状态下模糊解决办法

文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

解决办法,在样式文件中添加:文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

img {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}

如果是背景图片,给背景图片的DIV加上:文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

.xxx {
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

虽然处理后有所改善,不过还是与火狐有差距,而且Chrome看网页文字也明显不如火狐清晰,也可能是我不会调教这玩意吧。文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定

评论:1   其中:访客  1   博主  0
    • 遇见台儿庄
      遇见台儿庄 5

      以前用chrome现在换了edge