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

知更鸟 2021年2月1日08:34:16Web前端1 1.3K阅读模式

本人很少用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

.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看网页文字也明显不如火狐清晰,也可能是我不会调教这玩意吧。文章源自知更鸟-https://zmingcx.com/blur-when-chrome-image-is-reduced.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
评论  1  访客  1
    • 遇见台儿庄
      遇见台儿庄 5

      以前用chrome现在换了edge

    匿名

    发表评论

    匿名网友 填写信息

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

    确定