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

Web前端1 1.6K阅读模式

本人很少用Chrome,大部分情况下火狐是主力浏览器,随着新Microsoft Edge推出,两款浏览器也交替使用起来,感觉新Microsoft Edge确实比火狐能快些,不过发现在Microsoft Edge中缩小后的缩略图明显比火狐模糊。

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

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

解决办法,在样式文件中添加:

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

如果是背景图片,给背景图片的DIV加上:

.thumbnail{
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;          /* Firefox             */
	image-rendering: -o-crisp-edges;            /* Opera               */
	image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
	image-rendering: pixelated;                 /* Chrome as of 2019   */
	image-rendering: optimize-contrast;         /* CSS3 Proposed       */
	-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}

虽然处理后有所改善,不过还是与火狐有差距,而且Chrome看网页文字也明显不如火狐清晰,也可能是我不会调教这玩意吧。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
    • 遇见台儿庄
      遇见台儿庄 5

      以前用chrome现在换了edge

    匿名

    发表评论

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

    拖动滑块以完成验证