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

本人很少用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 图片缩小的状态下模糊解决办法

文章源自知更鸟-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

CSS文字加粗不影响整体宽度

CSS3 水平垂直居中

animation动画复合属性

CSS 六边形