CSS解决图片缩放变模糊不清晰

位图在放大尺寸后都会变得模糊不清晰，但在网页中插入图片时，即使原图非常清晰，缩小尺寸后也可能变得模糊。

使用CSS的image-rendering属性，可以解决这一问题，使用前后对比如下图所示：

代码如下：

img {
    image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges; /* WebKit引擎现不支持该值，Firefox支持 */
}

仅需两条样式，缩小的图片就变得清晰了。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。